export default function Footer({ path }) {
	const getPath = (e, path) => {
		let newLines = [];

		for (let line of path.split("\n")) {
			if (line[0] == "P") continue;
			if (line[0] == "S") continue;
			if (line[0] == "X") continue;

			newLines.push(line);
		}
		let xs = [];
		let ys = [];
		let zs = [];
		let toti = 0;
		let al = 0;
		for (let line of newLines) {
			al +=1;
			let theLine = line.split(",");
			//console.log(theLine)
			if (
				xs &&
				parseFloat(theLine[0]) == xs[-1] &&
				parseFloat(theLine[1]) == ys[-1]
			)
				continue;

			if (al > 2) {
				let dist = ((xs[xs.length-1] - xs[xs.length-2]) ** 2 + (ys[ys.length-1] - ys[ys.length-2]) ** 2) ** 0.5;
				toti += Math.round(dist);
			}
			xs.push(parseFloat(theLine[0]));
			ys.push(parseFloat(theLine[1]));
			zs.push(parseFloat(theLine[2]));
		}
		let prevLine = ["0", "0", "0"];
		let scaleFactor = 100000 / 2000;
		const canvas = document.getElementById("canvas");

		if (!canvas.getContext) {
			console.log("canvas err");
			return;
		}

		const ctx = canvas.getContext("2d");

		// set line stroke and line width
		ctx.strokeStyle = "red";
		ctx.lineWidth = 2;
		let totalH = Math.max(...zs);
		let minH = Math.min(...zs);
		for (let line = 0; line < xs.length - 1; line++) {
			let theLine = [xs[line], ys[line], zs[line]];
			let x = parseFloat(theLine[0]) - parseFloat(prevLine[0]);
			let y = parseFloat(theLine[1]) - parseFloat(prevLine[1]);
			let x1 = line * scaleFactor;
			let y1 = zs[line];
			let x2 = (line + 1) * scaleFactor;
			let y2 = zs[line + 1];
			//console.log(x1, y1, x2, y2);
			let b0 = 0;
			let b1 = 500;
			let z1 = b0 + (b1 - b0) * ((y1 - totalH) / (minH - totalH));
			let z2 = b0 + (b1 - b0) * ((y2 - totalH) / (minH - totalH));

			    	  //b0 + (b1 - b0) * ((x1-0)/(toti*scaleFactor-0));
			let x12 = b0 + (b1 - b0) * ((x1 - 0) / (toti*scaleFactor));
			let x22 = b0 + (b1 - b0) * ((x2 - 0) / (toti*scaleFactor));
			console.log(x12);

			ctx.beginPath();
			ctx.moveTo(x12, z1);
			ctx.lineTo(x22, z2);
			ctx.stroke();
		}
	};
	const draw = (e) => {
		//getPath(path);
		const canvas = document.getElementById("canvas");

		if (!canvas.getContext) {
			return;
		}

		const ctx = canvas.getContext("2d");

		// set line stroke and line width
		ctx.strokeStyle = "red";
		ctx.lineWidth = 2;

		// draw a red line
		ctx.beginPath();
		ctx.moveTo(234, 100);
		ctx.lineTo(234, 105);
		ctx.stroke();
	};
	//draw()
	return (
		<>
			<canvas id="canvas" height="600" width="600"></canvas>
			<button
				onClick={(e) => {
					//draw();
					getPath(e, path);
				}}
			>
				Rys
			</button>
		</>
	);
}