import GuideHelper from "../../UI/guideHelper/GuideHelper";
import DuaForm from "./DuaForm/DuaForm";
import "./duacreate.scss";
import { FormEvent, useState } from "react";
// import { checkContractNumber } from "../../API/dua";
import FormSuccess from "./DuaForm/DuaFormSuccess/FormSuccess";
import FormFailed from "./DuaForm/DuaFormFailed/FormFailed";
import { TransitionGroup, CSSTransition } from "react-transition-group";
import DuaCreateBanner from "../../../assets/images/dua_create_banner.png";

const DuaCreate = () => {
	const [contractNumber, setContractNumber] = useState("");
	const [step, setStep] = useState<"form" | "failed" | "success">("form");
	const [isLoading, setIsLoading] = useState(false);

	/**
	 * Handles Change of input Box
	 * Makes sure that the inputed values follows the correct pattern
	 * 1234-5678
	 * and autofills the -
	 */
	const handleInputChange = (value: string) => {
		let newValue = value;
		if (/^\d{8}$/g.test(value)) {
			newValue = value.slice(0, 4) + "-" + value.slice(4);
			setContractNumber(newValue);
			return;
		}
		const pattern = /^\d{0,4}$|^(\d{4}-\d{0,4})?$/g;

		if (value.length === 4) {
			if (contractNumber.slice(-1) == "-") {
				newValue = newValue.slice(0, 3);
			} else {
				newValue += "-";
			}
		}
		if (pattern.test(value)) {
			setContractNumber(newValue);
		}
	};

	const handleSubmission = async (e: FormEvent) => {
		e.preventDefault();
		setIsLoading(true);
		const res = "await checkContractNumber(contractNumber)";
		setIsLoading(false);
		if (res) {
			setStep("success");
		} else {
			setStep("failed");
		}
	};

	const resetForm = () => {
		setStep("form");
		setContractNumber("");
	};

	return (
		<div id="dua-create">
			<div className="blue-squares">
				<div className="s1"></div>
				<div className="s2"></div>
				<div className="s3"></div>
			</div>
			<div className="main-content">
				<h2>Αίτημα δημιουργίας D.U.A. (Demokritos User Account)</h2>
				<TransitionGroup>
					<CSSTransition key={step} classNames="fade" timeout={600}>
						<div className={"component-wrapper"}>
							<div className="row d-flex justify-content-between">
								{step === "form" && (
									<DuaForm
										isLoading={isLoading}
										contractNumber={contractNumber}
										onInputChange={handleInputChange}
										onFormSubmission={handleSubmission}
									/>
								)}

								{step === "success" && (
									<FormSuccess
										contractNumber={contractNumber}
									/>
								)}

								{step === "failed" && (
									<FormFailed
										resetForm={resetForm}
										contractNumber={contractNumber}
									/>
								)}

							</div>
						</div>
					</CSSTransition>
				</TransitionGroup>
			</div>
			<div className="banner">
				<img
					src={DuaCreateBanner}
					alt="DuaCreateBanner"
				/>
			</div>
			<GuideHelper />
		</div>
	);
};

export default DuaCreate;