import { useState } 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 });


    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)
			pointString += '.0,	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">
							<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}
							></TextInputField>
							<Button 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>
	);
}