import { useState } from "react";
import {
	Pane,
	TextInputField,
	TextareaField,
	Button,
	BuildIcon,
	toaster,
	Alert,
} from "evergreen-ui";
import axios from "axios";

export default function Generator() {
	const [profil, setProfil] = useState();
	const [args, setArgs] = useState({ scale: 200 });

	const parsePreview = (e) => {
		// console.log(dxf);
	};

	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 flex-col">
			<Pane width={480}>
				<TextareaField
					id="textarea-1"
					label="Dane z Geoportalu:"
					placeholder="Próbkowanie: 1 ..."
					onChange={(e) => {
						console.log(e.target.value);
						setProfil(e.target.value);
						parsePreview(e);
					}}
				/>

				<TextInputField
					label="Skala:"
					placeholder="200"
					width={100}
					onChange={(e) => {
						console.log(e.target.value);
						setArgs({ ...args, scale: e.target.value });
					}}
				/>
				<Button
					marginY={8}
					marginRight={12}
					appearance="default"
					iconAfter={BuildIcon}
					onClick={(e) => {
						if (document.getElementById("textarea-1").value == "") {
							toaster.danger("Pole danych nie może być puste");
						} else if (
							!document
								.getElementById("textarea-1")
								.value.startsWith("Próbkowanie")
						) {
							toaster.danger("Błędne dane");
						} else {
							py(e, profil, args);
						}
					}}
				>
					Generuj
				</Button>
			</Pane>

			<a href="test.dxf" download="test.dxf" id="down">
				{" "}
			</a>
		</div>
	);
}