import backgroundImage from "@Assets/images/background_refonte.svg";
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import AutocompleteMultiSelect from "@Front/Components/DesignSystem/AutocompleteMultiSelect";
import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import DragAndDrop from "@Front/Components/DesignSystem/DragAndDrop";
import Form from "@Front/Components/DesignSystem/Form";
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
import Module from "@Front/Config/Module";
import { PaperAirplaneIcon } from "@heroicons/react/24/outline";
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import { useRouter } from "next/router";
import React, { useCallback, useEffect, useMemo, useState } from "react";

import classes from "./classes.module.scss";

enum EClientSelection {
	ALL_CLIENTS = "all_clients",
	SELECTED_CLIENTS = "selected_clients",
}

export default function SendDocuments() {
	const router = useRouter();
	let { folderUid } = router.query;
	const [folder, setFolder] = useState<OfficeFolder | null>(null);
	const [clientSelection, setClientSelection] = useState<EClientSelection | null>(null);

	const onFormSubmit = useCallback(
		async (
			_e: React.FormEvent<HTMLFormElement> | null,
			_values: {
				[key: string]: any;
			},
			//TODO: when back is done
		) => {},
		[],
	);

	const fetchFolder = useCallback(async () => {
		Folders.getInstance()
			.getByUid(folderUid as string, {
				q: {
					customers: {
						include: {
							contact: true,
						},
					},
				},
			})
			.then((folder) => setFolder(folder))
			.catch((e) => console.warn(e));
	}, [folderUid]);

	const onClientSelectionChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
		setClientSelection(e.target.value as EClientSelection);
		console.log(e.target.value);
	}, []);

	useEffect(() => {
		fetchFolder();
	}, [fetchFolder]);

	const backUrl = useMemo(
		() =>
			Module.getInstance()
				.get()
				.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", folderUid as string),
		[folderUid],
	);

	const clientsOptions = useMemo(() => {
		if (!folder?.customers) return [];
		return folder.customers.map((customer) => ({
			id: customer.uid ?? "",
			label: `${customer.contact?.first_name} ${customer.contact?.last_name}`,
		}));
	}, [folder]);

	return (
		<DefaultDoubleSidePage title={"Demander des documents"} image={backgroundImage} showHeader>
			<div className={classes["root"]}>
				<BackArrow url={backUrl} />
				<Typography typo={ETypo.TITLE_H1} color={ETypoColor.TEXT_PRIMARY}>
					Envoyer des documents, sélectionnez les destinataires :
				</Typography>
				<div className={classes["radioboxes"]}>
					<RadioBox
						name="clients"
						value={EClientSelection.ALL_CLIENTS}
						label="Sélectionner tous les clients du dossier"
						onChange={onClientSelectionChange}
					/>
					<RadioBox
						name="clients"
						value={EClientSelection.SELECTED_CLIENTS}
						label="Sélectionner certains clients"
						onChange={onClientSelectionChange}
					/>
				</div>

				<Form onSubmit={onFormSubmit} className={classes["form"]}>
					{clientSelection === EClientSelection.SELECTED_CLIENTS && (
						<AutocompleteMultiSelect label="Choisir le ou les clients: " options={clientsOptions} />
					)}
					<DragAndDrop title="Glisser ou déposer ou" description="Formats acceptés : PDF, JPG Taille maximale : 5 Mo" />

					<div className={classes["buttons-container"]}>
						<a href={backUrl}>
							<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED}>
								Annuler
							</Button>
						</a>
						<Button type="submit" rightIcon={<PaperAirplaneIcon />}>
							Envoyer
						</Button>
					</div>
				</Form>
			</div>
		</DefaultDoubleSidePage>
	);
}