import "./libs/adapter.min.js";
import "./tensorflow.js";
import "./webrtcstreamer.js";

class WebRTCStreamerElement extends HTMLElement {
	static get observedAttributes() {
		return ['url', 'options', 'webrtcurl', 'notitle', 'width', 'height', 'algo'];
	}  
	
	constructor() {
		super(); 
		this.shadowDOM = this.attachShadow({mode: 'open'});
		this.shadowDOM.innerHTML = `
					<style>@import "styles.css"</style>
					<h2 id="title"></h2>
					<div id="content">
						<video id="video" muted playsinline></video>
						<canvas id="canvas"></canvas>
					</div>
					`;
		this.initialized = false;
		this.titleElement = this.shadowDOM.getElementById("title");
		this.videoElement = this.shadowDOM.getElementById("video");
		this.canvasElement = this.shadowDOM.getElementById("canvas");
		this.modelLoaded = {};
	}
	connectedCallback() {
		this.connectStream(true);
		this.initialized = true;
	}
	disconnectedCallback() {
		this.disconnectStream();
		this.initialized = false;
	}
	attributeChangedCallback(attrName, oldVal, newVal) {
		if (attrName === "notitle") {
			this.titleElement.style.visibility = "hidden";
		} else if (attrName === "width") {
			this.videoElement.style.width = newVal;
		} else if (attrName === "height") {
			this.videoElement.style.height = newVal;
		} if (this.initialized) {
			this.connectStream((attrName !== "algo"));
		}
	}
	
	disconnectStream() {
		if (this.webRtcServer) {
			this.webRtcServer.disconnect();
			this.webRtcServer = null;
		}
	}

	connectStream(reconnect) {
		
		const webrtcurl = this.getAttribute("webrtcurl");

		let videostream;
		let audiostream;

		const url = this.getAttribute("url");
		if (url) {
			try {
				let urljson = JSON.parse(url);
				videostream = urljson.video;
				audiostream = urljson.audio;
			} catch (e) {
				videostream = url;
			}
			
			const notitle = this.getAttribute("notitle");
			if (notitle === null) {
				this.titleElement.innerHTML = videostream; 
			}
			this.videoElement.title = videostream;

			// stop running algo
			Object.values(this.modelLoaded).forEach( promise => {
				if (promise.model) {
					promise.model.run = null; 
				} 
			});

			let imgLoaded;
			if (reconnect) {
				this.disconnectStream();

				imgLoaded = new Promise( (resolve,rejet) => {
					this.videoElement.addEventListener('loadedmetadata', () => resolve(), { once: true });
				} );

				this.webRtcServer = new WebRtcStreamer(this.videoElement, webrtcurl);
				this.webRtcServer.connect(videostream, audiostream, this.getAttribute("options"));

			} else {
				imgLoaded = new Promise( (resolve) => resolve() );
			}

			const algo = this.getAttribute("algo")
			let modelLoaded = this.getModelPromise(algo);
		
			Promise.all([imgLoaded, modelLoaded]).then(([event,model]) => {	
				this.setVideoSize(this.videoElement.videoWidth, this.videoElement.videoHeight)

				model.run = this.getModelRunFunction(algo);
				if (model.run) {
					model.run(model, this.videoElement, this.canvasElement)
					modelLoaded.model = model;
				}
			});			
		}
	}	

	setVideoSize(width, height) {
		this.videoElement.width = width;
		this.videoElement.height = height;

		this.canvasElement.width = width;
		this.canvasElement.height = height;
	}
	getModelPromise(algo) {
		let modelLoaded;
		if (this.modelLoaded[algo]) {
			modelLoaded = this.modelLoaded[algo];
		}
		else {
			if (algo === "posenet") {
				modelLoaded = posenet.load();
			} else if (algo === "deeplab") {
				modelLoaded = deeplab.load()
			} else if (algo === "cocossd") {
				modelLoaded = cocoSsd.load();
			} else if (algo === "bodyPix") {
				modelLoaded = bodyPix.load();
			} else if (algo === "blazeface") {
				modelLoaded = blazeface.load();
			} else {
				modelLoaded = new Promise( (resolve) => resolve() );
			}
			this.modelLoaded[algo] = modelLoaded;
		} 
		return modelLoaded;
	}

	getModelRunFunction(algo) {
		let modelFunction;
		if (algo === "posenet") {
			modelFunction = runPosenet;
		} else if (algo === "deeplab") {
			modelFunction = runDeeplab;
		} else if (algo === "cocossd") {
			modelFunction = runDetect;
		} else if (algo === "bodyPix") {
			modelFunction = runbodyPix;
		} else if (algo === "blazeface") {
			modelFunction = runblazeface;
		}
		return modelFunction;
	}
}

customElements.define('webrtc-streamer', WebRTCStreamerElement);