import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form";
import Select, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import BackArrow from "@Front/Components/Elements/BackArrow";
import Module from "@Front/Config/Module";
import { Deed, OfficeFolder } from "le-coffre-resources/dist/Notary";
import Link from "next/link";
import { useRouter } from "next/router";
import backgroundImage from "@Assets/images/background_refonte.svg";
import classes from "./classes.module.scss";
import DateField from "@Front/Components/DesignSystem/Form/DateField";
import { ValidationError } from "class-validator/types/validation/ValidationError";
import { useEffect, useState } from "react";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import { isArray } from "class-validator";

export default function UpdateFolderMetadata() {
	const router = useRouter();

	const [selectedFolder, setSelectedFolder] = useState<OfficeFolder | null>(null);
	const [validationError, setValidationError] = useState<ValidationError[]>([]);

	let { folderUid } = router.query;

	const onFormSubmit = async (
		e: React.FormEvent<HTMLFormElement> | null,
		values: {
			[key: string]: string;
		},
	) => {
		if (!folderUid || isArray(folderUid)) return;
		const newValues = OfficeFolder.hydrate<OfficeFolder>({
			...values,
			deed: Deed.hydrate<Deed>({
				uid: values["deed"],
			}),
		});

		try {
			await newValues.validateOrReject?.({ groups: ["updateFolder"], forbidUnknownValues: false });
		} catch (validationErrors) {
			setValidationError(validationErrors as ValidationError[]);
			return;
		}

		try {
			await Folders.getInstance().put(folderUid, newValues);
			const url = Module.getInstance()
				.get()
				.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", folderUid);

			router.push(url);
		} catch (backError) {
			if (!Array.isArray(backError)) return;
			setValidationError(backError);
			return;
		}
	};

	useEffect(() => {
		if (!folderUid || isArray(folderUid)) return;
		const query = {
			q: {
				deed: { include: { deed_type: true } },
				office: true,
				customers: { include: { contact: true } },
			},
		};
		Folders.getInstance()
			.getByUid(folderUid, query)
			.then((folder) => setSelectedFolder(folder));
	}, [folderUid]);

	const backwardPath = Module.getInstance()
		.get()
		.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", selectedFolder?.uid!);
	const deedOption = {
		label: selectedFolder?.deed?.deed_type?.name,
		value: selectedFolder?.deed?.deed_type?.uid,
	} as IOption;
	const openingDate = new Date(selectedFolder?.created_at ?? "");
	if (!selectedFolder?.created_at) return <></>;
	const defaultValue = openingDate.toISOString().split("T")[0];

	return (
		<DefaultDoubleSidePage title={"Ajouter client(s)"} image={backgroundImage}>
			<div className={classes["root"]}>
				<div className={classes["back-arrow"]}>
					<BackArrow url={backwardPath} />
				</div>
				<Typography typo={ETypo.TITLE_H1}>Modifier les informations du dossier</Typography>

				<Form className={classes["form"]} onSubmit={onFormSubmit}>
					<div className={classes["content"]}>
						<TextField
							name="name"
							placeholder="Intitulé du dossier"
							defaultValue={selectedFolder?.name}
							validationError={validationError.find((error) => error.property === "name")}
						/>
						<TextField
							name="folder_number"
							placeholder="Numéro de dossier"
							defaultValue={selectedFolder?.folder_number}
							validationError={validationError.find((error) => error.property === "folder_number")}
						/>
						<Select name="deed" options={[]} placeholder={"Type d'acte"} selectedOption={deedOption} disabled />
						<DateField name="opening_date" placeholder="Ouverture du dossier" defaultValue={defaultValue} disabled />
						<TextAreaField
							name="description"
							placeholder="Note du dossier"
							defaultValue={selectedFolder?.description ?? undefined}
							validationError={validationError.find((error) => error.property === "description")}
						/>
					</div>

					<div className={classes["button-container"]}>
						<Link href={backwardPath} className={classes["cancel-button"]}>
							<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
								Annuler
							</Button>
						</Link>
						<Button type="submit">Enregistrer les modifications</Button>
					</div>
				</Form>
			</div>
		</DefaultDoubleSidePage>
	);
}