import { useState, useEffect } from "react";
import {
	Pane,
	TextInputField,
	TextareaField,
	Button,
	toaster,
	Alert,
	TrashIcon,
	Icon,
} from "evergreen-ui";
import axios from "axios";
import Footer from "./footer";
import Generator from "./generator";

export default function Manual() {
	const [points, setPoints] = useState([{ id: 0, len: 0, height: 0 }]);
	const [args, setArgs] = useState({ scale: 200 });

	//useEffect(() => {
		//do something here
	// }, [points]);

	const reIndex = () => {
		let newId = 0;
		let newPoints = [];
		for (let point of points) {
			point.id = newId;
			newPoints.push(point);
			newId += 1;
		}
		setPoints([...newPoints]);
	};

	const generation = (e) => {
		let pointString = "Próbkowanie: 1\nSegment 0: w dół\nX:	Y,	Z";

		for (let point of points) {
			pointString += "\n";
			pointString += Number(point.len) * 1.0;
			pointString += ",	1.0,	";
			pointString += point.height;
		}

		console.log(pointString);
		py(e, pointString, args);
	};

	const py = (e, profil, args) => {
		e.preventDefault();

		axios
			.post("/api/spawn", {
				profil: profil,
				arguments: args,
			})
			.then(function (response) {
				console.log(response);
				if (response.data.toString().startsWith("Py Error")) {
					toaster.danger(response.data);
					return;
				}
				toaster.warning(response.data.data);
				document.getElementById("down").download =
					response.data.filename.toString() + ".dxf";
				document.getElementById("down").click();
			})
			.catch(function (error) {
				console.log(error);
			});
	};

	return (
		<div className="flex xl:flex-row flex-col">
			<div className="flex flex-col">
				<Pane width={480}>
					{points.map((point, index) => (
						<Pane className="flex flex-row items-center">
							<TextInputField
								id={`len-${index}`}
								placeholder="0 m"
								onChange={(e) => {
									console.log(e.target.value);
									let newPoints = points;
									newPoints[index].len = e.target.value;
									setPoints([...newPoints]);
								}}
								value={point.len}
							></TextInputField>
							<TextInputField
								id={`h-${index}`}
								placeholder="0 m n.p.m."
								onChange={(e) => {
									console.log(e.target.value);
									let newPoints = points;
									newPoints[index].height = e.target.value;
									setPoints([...newPoints]);
								}}
								value={point.height}
								onKeyDown={(e) => {
									if (e.key == "Enter") {
										setPoints([
											...points,
											{
												id: points.length,
												len: Number(points[points.length - 1].len) + 1,
												height: 0,
											},
										]);

										let nextDiv = e.target.parentNode.parentNode.nextSibling;
										nextDiv.childNodes[1].childNodes[1].focus()
										nextDiv.childNodes[1].childNodes[1].setSelectionRange(0, 1)
									}
								}}
							></TextInputField>
							<Button
								className="mb-5"
								appearance="minimal"
								onClick={() => {
									let newPoints = points;
									newPoints.splice(index, 1);
									setPoints([...newPoints]);
									reIndex();
								}}
							>
								<Icon icon={TrashIcon} color="danger"></Icon>
							</Button>
						</Pane>
					))}
				</Pane>
				<Button
					onClick={() => {
						setPoints([
							...points,
							{
								id: points.length,
								len: Number(points[points.length - 1].len) + 1,
								height: 0,
							},
						]);
					}}
				>
					Dodaj
				</Button>
				<Button
					appearance="primary"
					onClick={(e) => {
						generation(e);
					}}
				>
					Generuj
				</Button>
			</div>
		</div>
	);
}