let array = [];
let prevClick = [];
let sectionStarted = -1;

function catchMouse(event) {
	event.preventDefault();
	if (event.target.className == "ol-unselectable") {
		const bttm = document.getElementsByClassName("pl-2");
		const x = bttm[0].innerHTML;
		const y = bttm[1].innerHTML;
		array.push([x, y]);

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

		if (prevClick.length == 0) {
			prevClick = [event.clientX, event.clientY - header];
			ctx.beginPath();
			ctx.arc(prevClick[0], prevClick[1], 3, 0, Math.PI * 2, true);
			ctx.fill();
		} else {
			ctx.beginPath();
			ctx.moveTo(prevClick[0], prevClick[1]);
			prevClick = [event.clientX, event.clientY - header];
			ctx.lineTo(prevClick[0], prevClick[1]);
			ctx.stroke();
			ctx.beginPath();
			ctx.arc(prevClick[0], prevClick[1], 3, 0, Math.PI * 2, true);
			ctx.fill();
		}
	}
	sectionDraw.innerText = array.length;
}

function sectionDrawClick() {
	sectionStarted = -sectionStarted;

	const canvas = document.getElementsByClassName("ol-unselectable")[0];

	if (sectionStarted == 1) {
		sectionDraw.style.background = "crimson";
		array = [];
		canvas.addEventListener("click", catchMouse, true);
		sectionDraw.innerText = array.length;
	} else {
		prevClick = [];
		sectionDraw.style.background = "none";
		canvas.removeEventListener("click", catchMouse, true);
	}
}

function sectionDownloadClick() {
	sectionDownload.style.background = "none";
	// let url = 'https://mapy.geoportal.gov.pl/wss/ims/gp/nmt/profile3D/submitJob';

	let arrayString = "";

	for (let part of array) {
		arrayString = arrayString + ";" + part;
	}

	let URL = `https://epsg.io/trans?data=${arrayString.slice(
		1
	)}&s_srs=2177&t_srs=2180`;

	fetch(URL, {
		method: "GET",
	})
		.then((response) => response.json())
		.then((data) => {
			let newArray = [];
			let dataString = "[[";
			for (let point of data) {
				dataString = dataString + "[" + point.x + "," + point.y + "],";
			}
			dataString = dataString.slice(0, dataString.length - 1) + "]]";
			body = `geometry=%7B%22paths%22%3A${dataString}%2C%22spatialReference%22%3A%7B%22wkid%22%3A2180%7D%7D&segment=1&token=CBlPCf6Y140rcxQkthN3wGDtsaEYDhdBILokv6JKaWDkbrhN9IO5D3ecyRKFH6fpxQ9z0SfB13m6dMQ4jtwDsQ..&f=json`;
			bod = {
				geometry:
					'{"paths":' + dataString + ',"spatialReference":{"wkid":2180}}',
				segment: 1,
				token:
					"CBlPCf6Y140rcxQkthN3wGDtsaEYDhdBILokv6JKaWDkbrhN9IO5D3ecyRKFH6fpxQ9z0SfB13m6dMQ4jtwDsQ..",
				f: "json",
			};

			URL = "https://mapy.geoportal.gov.pl/wss/ims/gp/nmt/profile3D/submitJob";

			fetch(URL, {
				headers: {
					"content-type": "application/x-www-form-urlencoded",
				},
				method: "POST",
				body: body,
			})
				.then((response) => response.json())
				.then((data) => {
					let status = data.jobStatus;
					let id = data.jobId;

					URL = `https://mapy.geoportal.gov.pl/wss/ims/gp/nmt/profile3D/jobs/${id}?f=json`;
					fetchStatus(id);
				});
		});
}

function fetchStatus(id) {
	URL = `https://mapy.geoportal.gov.pl/wss/ims/gp/nmt/profile3D/jobs/${id}?f=json`;
	fetch(URL)
		.then((response) => response.json())
		.then((data) => {
			let status = data.jobStatus;
			if (status == "succeeded") {
				URL = `https://mapy.geoportal.gov.pl/wss/ims/gp/nmt/profile3D/jobs/${id}/results/result?f=json`;
				fetch(URL)
					.then((response) => response.json())
					.then((data) => {
						result = data.value.paths;

						fetch("https://test.wastpol.pl/api/external", {
							method: "POST",
							body: result,
						})
							.then((response) => response.json())
							.then((data) => {
								window.open(data.url, "_blank");
							});

						const canvas =
							document.getElementsByClassName("ol-unselectable")[0];
						const ctx = canvas.getContext("2d");
						const height = canvas.height;
						i = 20;
						for (let line of result[0]) {
							ctx.beginPath();
							ctx.arc(
								i,
								height - ((line[2] - 300) / 100) * 600,
								2,
								0,
								Math.PI * 2,
								true
							);
							ctx.fill();
							i += 4;
						}
					});
			} else {
				fetchStatus(id);
			}
		});
}