import ReactDOM from "react-dom";
import {FormEvent} from "react";
import DuaLoader from "../../../UI/Loader/DuaLoader/DuaLoader";
import FormButtonSubmit from "../../../UI/Forms/FormButton/FormButtonSubmit";

type DuaFormProps = {
	isLoading: boolean;
	contractNumber: string;
	onInputChange: (n: string) => void;
	onFormSubmission: (e: FormEvent) => void;
};

const DuaForm = (props: DuaFormProps) => {
	return (
		<div className="col-12 col-lg-6">
			{
                props.isLoading &&
                ReactDOM.createPortal(
                    <div className="dua-loader-portal">
                        <DuaLoader/>
                    </div>,
                    document.body
                )
            }
			<form onSubmit={(e) => props.onFormSubmission(e)} id={"dua-form"}>
				<p>
					Παρακαλώ συμπληρώστε τον αριθμό πρωτοκόλλου της ενεργής
					σύμβασής σας & πατήστε δημιουργία D.U.A.
				</p>

				<div className={"contract-wrapper"}>
					<input
						placeholder="1234-5678"
						value={props.contractNumber}
						onChange={(e) => props.onInputChange(e.target.value)}
						id="contract"
						type="text"
					/>
					<label htmlFor="contract">015/</label>
				</div>

				<FormButtonSubmit
					buttonType="submit"
					disabled={!(props.contractNumber.length == 9)}
				>
					δημιουργια d.u.a
				</FormButtonSubmit>
			</form>
		</div>
	);
};

export default DuaForm;