import React, {FormEvent, useState} from "react";
import * as authAPI from "../../../API/user";
import "../../Login/Login.scss";
import LdapSuccess from "./LdapSuccess/LdapSuccess";
import LdapFailed from "./LdapFailed/LdapFailed";
import Group from "../../../assets/images/dua-button-login.svg";
import FormButtonSubmit from "../../UI/Forms/FormButton/FormButtonSubmit";

const LdapReq = () => {
	const validateInputs = (): boolean => {
		return /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(
			formData.email
		);
	};
	const [step, setStep] = useState("form");
	const [formData, setFormData] = useState({
		email: "",
	});
	const handleSubmit = async (e: FormEvent) => {
		e.preventDefault();
		try {
			const login = await authAPI.ldapexist(formData);
			const res = login.status;
			setStep("success");
		} catch {
			setStep("failed");
		}
	};

	return (
		<div id="ldap-req" className="App">
			<div className="orange-squares">
				<div className="s1"></div>
				<div className="s2"></div>
			</div>
			<div className="main-content">
				<h2>Έλεγχος για Κεντρικό Κατάλογο</h2>
				<form onSubmit={(e) => handleSubmit(e)}>
					<div className="credentials-wrapper">
						<div className="row d-flex justify-content-between">
							{step === "form" && (
								<>
									<div className="col-12 col-lg-6">
										<p>
											Παρακαλώ συμπληρώστε το υπηρεσιακό
											email σας.
										</p>
										<div className="input-wrapper">

											<input
												placeholder="someone@example.com"
												name="email"
												type="text"
												value={formData.email}
												onChange={(e) =>
													setFormData({
														email: e.target.value,
													})
												}
											/>
											<label>EMAIL</label>

										</div>
										<FormButtonSubmit
											buttonType="submit"
											disabled={!validateInputs()}
										>
											ΕΛΕΓΧΟΣ
										</FormButtonSubmit>
									</div>
								</>
							)}
							{step === "success" && (
								<LdapSuccess email={formData.email} />
							)}
							{step === "failed" && (
								<LdapFailed email={formData.email} />
							)}

						</div>
					</div>
				</form>
			</div>
			<div className="banner">
				<img src={Group} alt="ldapreq"/>
			</div>
		</div>
	);
};

export default LdapReq;