class WebRTCStreamerOptionsElement extends HTMLElement {	
	constructor() {
		super(); 
		this.shadowDOM = this.attachShadow({mode: 'open'});
		this.shadowDOM.innerHTML = `
					<style>@import "styles.css"</style>
					<h2>Options</h2>
					<div id="options"></div>
					<button id="apply">Apply</button>
					`;
		this.button = this.shadowDOM.getElementById("apply");
		this.button.onclick = () => this.notifyOptions();
		this.params = new URLSearchParams();
	}

	static get observedAttributes() {
		return ['options'];
	}  

	attributeChangedCallback(attrName, oldVal, newVal) {
		if (attrName === "options") {
			this.fillOptions();
		}
	}

	connectedCallback() {
		this.fillOptions();
	}

	fillOptions() {
		const options = this.getAttribute("options") || "";
		this.params = new URLSearchParams(options);

		let optElement = this.shadowDOM.getElementById("options");
		optElement.innerHTML = "";

		for (let [k,v] of this.params.entries()) {
			let label = document.createTextNode(k+":");
			optElement.appendChild(label);			
			let input = document.createElement("input");
			input.type = "text";
			input.value = v;
			input.onchange = () => this.params.set(k, input.value);
			optElement.appendChild(input);		
			optElement.appendChild(document.createElement("br"));		
		}	
	}

	notifyOptions()
	{
		this.setAttribute("options", this.params.toString());
		this.dispatchEvent(new CustomEvent('change', {
			detail: {
		  		options: this.params.toString(),
			}
	  	}));
	}
}

customElements.define('webrtc-streamer-options', WebRTCStreamerOptionsElement);