const mpzpIcon = document.createElement("img");

function mpzpButtonClick() {
	mpzpIcon.src = chrome.runtime.getURL("icons/loading.gif");

	const canvas = document.getElementsByClassName("ol-unselectable")[0];
	const ctx = canvas.getContext("2d");
	const height = canvas.height;
	const width = canvas.width;

	let XMIN = MapData.X_MIN;
	let YMIN = MapData.Y_MIN;
	let XMAX = MapData.X_MAX;
	let YMAX = MapData.Y_MAX;

	let URL = `https://epsg.io/trans?data=${XMIN},${YMIN};${XMAX},${YMAX}&s_srs=2177&t_srs=2180`;

	fetch(URL, {
		method: "GET",
	})
		.then((response) => response.json())
		.then((data) => {
			let NXMIN = data[0].x;
			let NYMIN = data[0].y;
			let NXMAX = data[1].x;
			let NYMAX = data[1].y;
			getGmina(width, height, NXMIN, NYMIN, NXMAX, NYMAX).then((gmina) => {
				console.log(gmina);

				if (gmina == "Chełmiec") {
					mpzpButton.style.background = "teal";
					mpzpIcon.src = chrome.runtime.getURL("icons/mpzp.png");
					console.log(NXMIN, NYMIN)
					port.postMessage({
						response: "getChelmiec",
						XMIN: NXMIN,
						YMIN: NYMIN,
						XMAX: NXMAX,
						YMAX: NYMAX,
					});
					return;
				}
				if (gmina == "Łososina Dolna") {
					mpzpButton.style.background = "blue";
					mpzpIcon.src = chrome.runtime.getURL("icons/mpzp.png");
					console.log(NXMIN, NYMIN)
					port.postMessage({
						response: "getLososina",
						XMIN: NXMIN,
						YMIN: NYMIN,
						XMAX: NXMAX,
						YMAX: NYMAX,
					});
					return;
				}
				if (gmina == "Nawojowa") {
					mpzpButton.style.background = "lime";
					mpzpIcon.src = chrome.runtime.getURL("icons/mpzp.png");
					let X = Number(XMIN) + Math.abs((XMAX - XMIN) / 2);
					let Y = Number(YMIN) + Math.abs((YMAX - YMIN) / 2);
					let URL = `https://epsg.io/trans?data=${X},${Y}&s_srs=2177&t_srs=4258`;

					fetch(URL, {
						method: "GET",
					})
						.then((response) => response.json())
						.then((data) => {
							port.postMessage({
								response: "getNawojowa",
								X: data.y,
								Y: data.x,
							});
							return;
						})
					
				}

				var img = new Image();
				img.onload = function () {
					ctx.drawImage(img, 0, 0, width, height);
					mpzpIcon.src = chrome.runtime.getURL("icons/mpzp.png");
					console.log("LO");
					mpzpButton.style.background = "none";
				};
				img.onerror = function () {
					mpzpIcon.src = chrome.runtime.getURL("icons/mpzp.png");

					mpzpButton.style.background = "pink";
				};

				img.src = `
				https://mapy.geoportal.gov.pl/wss/ext/KrajowaIntegracjaMiejscowychPlanowZagospodarowaniaPrzestrzennego?REQUEST=GetMap&TRANSPARENT=TRUE&FORMAT=image%2Fpng&VERSION=1.3.0&LAYERS=raster%2Cwektor-str%2Cwektor-lzb%2Cwektor-pow%2Cwektor-lin%2Cwektor-pkt%2Cgranice&STYLES=%2C%2C%2C%2C%2C%2C&EXCEPTIONS=xml&BBOX=${NYMIN}%2C${NXMIN}%2C${NYMAX}%2C${NXMAX}&CRS=EPSG%3A2180&WIDTH=${width}&HEIGHT=${height}&SERVICE=WMS
				`;
				console.log("EN");
				mpzpButton.style.background = "none";
			});
		});
}