type dialogjson=[
	"hdiv",...dialogjson[]
]|[
	"vdiv",...dialogjson[]
]|[
	"img",string,[number,number]|undefined|["fit"]
]|[
	"checkbox",string,boolean,(this:HTMLInputElement,e:Event)=>unknown
]|[
	"button",string,string,(this:HTMLButtonElement,e:Event)=>unknown
]|[
	"mdbox",string,string,(this:HTMLTextAreaElement,e:Event)=>unknown
]|[
	"textbox",string,string,(this:HTMLInputElement,e:Event)=>unknown
]|[
	"fileupload",string,(this:HTMLInputElement,e:Event)=>unknown
]|[
	"text",string
]|[
	"title",string
]|[
	"radio",string,string[],(this:unknown,e:string)=>unknown,number
]|[
	"html",HTMLElement
]|[
	"select",string,string[],(this:HTMLSelectElement,e:Event)=>unknown,number
]|[
	"tabs",[string,dialogjson][]
]
class Dialog{
	layout:dialogjson;
	onclose: Function;
	onopen: Function;
	html:HTMLDivElement;
	background: HTMLDivElement;
	constructor(layout:dialogjson,onclose=_=>{},onopen=_=>{}){
		this.layout=layout;
		this.onclose=onclose;
		this.onopen=onopen;
		const div=document.createElement("div");
		div.appendChild(this.tohtml(layout));
		this.html=div;
		this.html.classList.add("centeritem");
		if(!(layout[0]==="img")){
			this.html.classList.add("nonimagecenter");
		}
	}
	tohtml(array:dialogjson):HTMLElement{
		switch(array[0]){
			case"img":
				const img=document.createElement("img");
				img.src=array[1];
				if(array[2]!=undefined){
					if(array[2].length===2){
						img.width=array[2][0];
						img.height=array[2][1];
					}else if(array[2][0]==="fit"){
						img.classList.add("imgfit");
					}
				}
				return img;
			case"hdiv":
				const hdiv=document.createElement("div");
				hdiv.classList.add("flexltr")

				for(const thing of array){
					if(thing==="hdiv"){
						continue;
					}
					hdiv.appendChild(this.tohtml(thing));
				}
				return hdiv;
			case"vdiv":
				const vdiv=document.createElement("div");
				vdiv.classList.add("flexttb");
				for(const thing of array){
					if(thing==="vdiv"){
						continue;
					}
					vdiv.appendChild(this.tohtml(thing));
				}
				return vdiv;
			case"checkbox":
			{
				const div=document.createElement("div");
				const checkbox = document.createElement("input");
				div.appendChild(checkbox);
				const label=document.createElement("span");
				checkbox.checked=array[2];
				label.textContent=array[1];
				div.appendChild(label);
				checkbox.addEventListener("change",array[3]);
				checkbox.type = "checkbox";
				return div;
			}
			case"button":
			{
				const div=document.createElement("div");
				const input = document.createElement("button");

				const label=document.createElement("span");
				input.textContent=array[2];
				label.textContent=array[1];
				div.appendChild(label);
				div.appendChild(input);
				input.addEventListener("click",array[3]);
				return div;
			}
			case"mdbox":
			{
				const div=document.createElement("div");
				const input=document.createElement("textarea");
				input.value=array[2];
				const label=document.createElement("span");
				label.textContent=array[1];
				input.addEventListener("input",array[3]);
				div.appendChild(label);
				div.appendChild(document.createElement("br"));
				div.appendChild(input);
				return div;
			}
			case"textbox":
			{
				const div=document.createElement("div");
				const input=document.createElement("input");
				input.value=array[2];
				input.type="text";
				const label=document.createElement("span");
				label.textContent=array[1];
				console.log(array[3]);
				input.addEventListener("input",array[3]);
				div.appendChild(label);
				div.appendChild(input);
				return div;
			}
			case"fileupload":
			{
				const div=document.createElement("div");
				const input=document.createElement("input");
				input.type="file";
				const label=document.createElement("span");
				label.textContent=array[1];
				div.appendChild(label);
				div.appendChild(input);
				input.addEventListener("change",array[2]);
				console.log(array);
				return div;
			}
			case"text":{
				const span =document.createElement("span");
				span.textContent=array[1];
				return span;
			}
			case"title":{
				const span =document.createElement("span");
				span.classList.add("title");
				span.textContent=array[1];
				return span;
			}
			case"radio":{
				const div=document.createElement("div");
				const fieldset=document.createElement("fieldset");
				fieldset.addEventListener("change",()=>{
					let i=-1;
					for(const thing of fieldset.children){
						i++;
						if(i===0){
							continue;
						}
						const checkbox = thing.children[0].children[0] as HTMLInputElement;
						if(checkbox.checked){
							array[3](checkbox.value);
						}
					}
				});
				const legend=document.createElement("legend");
				legend.textContent=array[1];
				fieldset.appendChild(legend);
				let i=0;
				for(const thing of array[2]){
					const div=document.createElement("div");
					const input=document.createElement("input");
					input.classList.add("radio");
					input.type="radio";
					input.name=array[1];
					input.value=thing;
					if(i===array[4]){
						input.checked=true;
					}
					const label=document.createElement("label");

					label.appendChild(input);
					const span=document.createElement("span");
					span.textContent=thing;
					label.appendChild(span);
					div.appendChild(label);
					fieldset.appendChild(div);
					i++;
				}
				div.appendChild(fieldset);
				return div;
			}
			case"html":
				return array[1];

			case"select":{
				const div=document.createElement("div");
				const label=document.createElement("label");
				const select=document.createElement("select");

				label.textContent=array[1];
				div.append(label);
				div.appendChild(select);
				for(const thing of array[2]){
					const option = document.createElement("option");
					option.textContent=thing;
					select.appendChild(option);
				}
				select.selectedIndex=array[4];
				select.addEventListener("change",array[3]);
				return div;
			}
			case"tabs":{
				const table=document.createElement("div");
				table.classList.add("flexttb");
				const tabs=document.createElement("div");
				tabs.classList.add("flexltr")
				tabs.classList.add("tabbed-head");
				table.appendChild(tabs);
				const content=document.createElement("div");
				content.classList.add("tabbed-content");
				table.appendChild(content);

				let shown:HTMLElement|undefined;
				for(const thing of array[1]){
					const button=document.createElement("button");
					button.textContent=thing[0];
					tabs.appendChild(button);

					const html=this.tohtml(thing[1]);
					content.append(html);
					if(!shown){
						shown=html;
					}else{
						html.style.display="none";
					}
					button.addEventListener("click",_=>{
						if(shown){
							shown.style.display="none";
						}
						html.style.display="";
						shown=html;
					});
				}
				return table;
			}
			default:
				console.error("can't find element:"+array[0],"  full element:",array);
				return document.createElement("span");
		}
	}
	show(){
		this.onopen();
		console.log("fullscreen");
		this.background=document.createElement("div");
		this.background.classList.add("background");
		document.body.appendChild(this.background);
		document.body.appendChild(this.html);
		this.background.onclick = _=>{
			this.hide();
		};
	}
	hide(){
		document.body.removeChild(this.background);
		document.body.removeChild(this.html);
	}
}
export{Dialog};