/**
 * temporary fix for https://github.com/AUTOMATIC1111/stable-diffusion-webui/issues/668
 * @see https://github.com/gradio-app/gradio/issues/1721
 */

 /*
window.addEventListener( 'resize', () => imageMaskResize());

function imageMaskResize() {
    const canvases = gradioApp().querySelectorAll('#img2maskimg .touch-none canvas');
    if ( ! canvases.length ) {
    canvases_fixed = false; // TODO: this is unused..?
    window.removeEventListener( 'resize', imageMaskResize );
    return;
    }

    const wrapper = canvases[0].closest('.touch-none');
    const previewImage = wrapper.previousElementSibling;

    if ( ! previewImage.complete ) {
        previewImage.addEventListener( 'load', imageMaskResize);
        return;
    }

    const w = previewImage.width;
    const h = previewImage.height;
    const nw = previewImage.naturalWidth;
    const nh = previewImage.naturalHeight;
    const portrait = nh > nw;

    const wW = Math.min(w, portrait ? h/nh*nw : w/nw*nw);
    const wH = Math.min(h, portrait ? h/nh*nh : w/nw*nh);

    wrapper.style.width = `${wW}px`;
    wrapper.style.height = `${wH}px`;
    wrapper.style.left = `0px`;
    wrapper.style.top = `0px`;

    canvases.forEach( c => {
        c.style.width = c.style.height = '';
        c.style.maxWidth = '100%';
        c.style.maxHeight = '100%';
        c.style.objectFit = 'contain';
    });
 }

 onUiUpdate(() => imageMaskResize());
*/

onUiLoaded(function(){
	const color_box = '<input type="color">';
	const brush_size = '<input type="range" min="0.75" max="110.0">';
	let is_drawing = false;
	let img_src = [];
	let spl_instances = [];
	let spl_pan_instances = [];
	let img2img_tab_index = 0;
	const container = gradioApp().querySelector(".gradio-container");
    const observer  = new MutationObserver(() => 
		gradioApp().querySelectorAll('div[data-testid="image"]').forEach(function (elem, i){			
			let img_parent = elem.parentElement.querySelector('div[data-testid="image"] > div');
			let img = img_parent.querySelector('img');
			if(img){
				if(img_src[i] != img.src){
					let tool_buttons = img_parent.querySelectorAll('button');
					//console.log(tool_buttons);
					if(tool_buttons.length > 2){
						let spl_parent = elem.parentElement;
						let spl;
						let spl_pan;
						let isPanning;
						let splid;
						
						if(spl_parent.className != "spl-pane"){							
							spl = new Spotlight();	
							spl.init(spl_parent, "-"+spl_parent.id);
							
							spl.addControl("undo", spl_undo_handler);
							spl_pan = spl.addControl("pan", spl_pan_handler);	
							spl.addControl("brush", spl_brush_handler, brush_size);
							if(tool_buttons.length == 5){
								spl.addControl("color", spl_color_handler, color_box);
							}
							spl.addControl("clear",spl_clear_handler);
							
							spl_instances[i] = spl;
							spl_pan_instances[i] = spl_pan;							
							
						}else{
							spl = spl_instances[i];							
							spl_pan = spl_pan_instances[i];														
						}
						
						img_src[i] = img.src;						
						//console.log("NEWIMAGE");

						function spl_undo_handler(e) {
							tool_buttons[0].click();
						}
						
						function spl_clear_handler(e){							
							tool_buttons[2].click();
							spl.panzoom(false);
							img_parent.classList.remove("no-point-events");
							img_parent.parentElement.classList.remove("move");
							document.removeEventListener('wheel', preventDefault, false);							
							setTimeout(function() { 
								spl.close(false, true);
								img_parent.style.flexGrow = "1";
								img_src[i] = "";								
								elem.style.transform = "none";
							}, 200);					
							
						}
						
						function spl_color_handler(e){}
						function spl_brush_handler(e){}

						function preventDefault(e) {
							e = e || window.event
							if (e.preventDefault) {
							  e.preventDefault()
							}
							e.returnValue = false
						}

						function pan_toggle(val, target){
							isPanning = val;
							target.classList.toggle("on", isPanning);
							spl.panzoom(val);
							
							if(isPanning){
								img_parent.classList.add("no-point-events");
								img_parent.parentElement.classList.add("move");
								document.addEventListener('wheel', preventDefault, {passive: false});
							}else{
								img_parent.classList.remove("no-point-events");
								img_parent.parentElement.classList.remove("move");
								document.removeEventListener('wheel', preventDefault, false);
							}
							
						}

						function spl_pan_handler(e){
							isPanning = !isPanning;
							pan_toggle(isPanning, this);
						}

						function update_color(listener){
							let input_color = img_parent.querySelector("input[type='color']");
							let spl = img_parent.parentElement.parentElement.parentElement.parentElement.parentElement;
							let spl_color = spl.querySelector(".spl-color input[type='color']");
							spl_color.value = input_color.value;
							
							if(listener){
								spl_color.addEventListener("input", function(ev) {						
									input_color.value = ev.target.value;
									updateInput(input_color);
									pan_toggle(false, spl_pan);					
								})
							}
						} 

						function update_brush(listener){
							let input_range = img_parent.querySelector("input[type='range']");
							let spl = img_parent.parentElement.parentElement.parentElement.parentElement.parentElement;
							let spl_brush = spl.querySelector(".spl-brush input[type='range']");
							spl_brush.value = input_range.value;
							
							if(listener){
								spl_brush.addEventListener("input", function(ev) {						
									input_range.value = ev.target.value;
									updateInput(input_range);				
								})
							}
						}

 						function init_drawing_tools(){	
						
							let input_color = img_parent.querySelector("input[type='color']");
							if(!input_color){
								let tbcolor = img_parent.querySelector("button[aria-label='Select brush color']");
								if(tbcolor){									
									tbcolor.click();	
									setTimeout(function() { update_color(true);	}, 100);
								}
							}else{
								setTimeout(function() { update_color(false);}, 100);		
							}	
							
							let input_range = img_parent.querySelector("input[type='range']");
							if(!input_range){
								let tbrange = img_parent.querySelector("button[aria-label='Use brush']");
								
								if(tbrange){
									tbrange.click();	
									setTimeout(function() { update_brush(true);	}, 100);
								}
							}else{
								setTimeout(function() { update_brush(false);}, 100);		
							} 

						}

						let w = img.naturalWidth; 
						let h = img.naturalHeight; 
						img_parent.style.width = `${w}px`;
						img_parent.style.height = `${h}px`;
						
						spl.show([{						
							media: "node",																		
							src: elem,
							//autohide: true,
							//control: ["pan","clear","undo","fullscreen","autofit","zoom-in","zoom-out","close"],
							class: "relative",
						}],					
						);

						img_parent.style.flexGrow = "0";						
						pan_toggle(false, spl_pan);					
						spl.panzoom(false);
						setTimeout(function() { init_drawing_tools(); }, 500);
						
						img.addEventListener('mouseup', function(e){
							img_src[i] = img.src;							
						})

					}
				}
			}
		}));
    observer.observe(container, { childList: true, subtree: true });
	
	
/* 	gradioApp().querySelectorAll('#mode_img2img > .tabitem').forEach(function (tb, ti){	
		tb.querySelectorAll('[id^="img2img_copy_to_"] > button').forEach(function (btn, bi){	
			
			btn.addEventListener("click", function(e) {
				console.log(ti + " > " + bi);
				let src_canvas = tb.querySelector('[key="drawing"]');
				if(src_canvas){					
					let dest_canvas = gradioApp().querySelector('#mode_img2img .tabitem:nth-child('+parseInt(bi+1)+') [key="drawing"]');
					//let destCtx = dest_canvas.getContext('2d');
					//destCtx.drawImage(src_canvas, 0, 0);	
					console.log(src_canvas);
					console.log(dest_canvas);
				}
			})
		})
	})
	
 */
	
	
})


/* 
let intervalLastUIUpdate;
function onLastUIUpdate(){
	clearInterval(intervalLastUIUpdate);
	const img2img_tab = gradioApp().querySelector('#img2img_img2img_tab');
	if(img2img_tab && selectedTabItemId=="tab_img2img"){
		const current_img2img_tab_index = get_img2img_tab_index()[0];
		//if(img2img_tab_index != current_img2img_tab_index){
			console.log(current_img2img_tab_index);
			if(current_img2img_tab_index > 3 || current_img2img_tab_index == 0) return;
			img2img_tab_index = current_img2img_tab_index;
			let tabid;
			
			if(img2img_tab_index == 1){
				tabid = "#img2img_img2img_sketch_tab";// #img2img_sketch";			
			}else if(img2img_tab_index == 2){
				tabid = "#img2img_inpaint_tab";// #img2maskimg";
			}else if(img2img_tab_index == 3){
				tabid = "#img2img_inpaint_sketch_tab";// #inpaint_sketch";
			}
			//const parent_img2img_tab_img = gradioApp().querySelector('#mode_img2img > div:nth-child('+(img2img_tab_index+2)+') div[data-testid="image"] > div');
			const parent_img2img_tab_img = gradioApp().querySelector('#mode_img2img '+tabid+' div[data-testid="image"] > div');		
			const img2img_tab_img = parent_img2img_tab_img.querySelector('img');			
			if(img2img_tab_img){			
				parent_img2img_tab_img.style.flexGrow = "0";				
				img2img_tab_img.onload = function() {
					let w = this.naturalWidth; 
					let h = this.naturalHeight; 
					parent_img2img_tab_img.style.width = `${w}px`;
					parent_img2img_tab_img.style.height = `${h}px`;
				}
			}else{
				parent_img2img_tab_img.style.flexGrow = "1";
			}
		//}
	}
}

onUiUpdate(function() {	
	if(intervalLastUIUpdate != null) clearInterval(intervalLastUIUpdate);
	intervalLastUIUpdate = setInterval(onLastUIUpdate, 1000);	
}) */