lecoffre-front/src/front/Components/Layouts/Folder/SendDocuments/index.tsx

import backgroundImage from "@Assets/images/background_refonte.svg";
import DocumentsNotary from "@Front/Api/LeCoffreApi/Notary/DocumentsNotary/DocumentsNotary";
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import DragAndDrop from "@Front/Components/DesignSystem/DragAndDrop";
import Form from "@Front/Components/DesignSystem/Form";
import AutocompleteMultiSelectField from "@Front/Components/DesignSystem/Form/AutocompleteMultiSelectField";
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
import { ToasterService } from "@Front/Components/DesignSystem/Toaster";
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 { ValidationError } from "class-validator";
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 [selectedClients, setSelectedClients] = useState<string[]>([]);
	const [files, setFiles] = useState<File[]>([]);
	const [isSending, setIsSending] = useState(false);
	const [validationError, setValidationError] = useState<ValidationError | null>(null);

	const onFormSubmit = useCallback(
		async (
			_e: React.FormEvent<HTMLFormElement> | null,
			_values: {
				[key: string]: any;
			},
		) => {
			if (!files.length) {
				console.error("No files to send");
				return;
			}

			try {
				setIsSending(true);

				if (selectedClients.length === 0) {
					setValidationError({
						property: "clients",
						constraints: {
							isEmpty: "Veuillez sélectionner au moins un client",
						},
					});
					throw new Error("No clients selected");
				}

				await Promise.all(
					selectedClients.map(async (customer) => {
						const promises = files.map(async (file) => {
							const formData = new FormData();
							formData.append("customerUid", customer as string);
							formData.append("folderUid", folderUid as string);
							formData.append("name", file.name);
							formData.append("file", file);

							// Envoi de chaque fichier pour chaque client
							return DocumentsNotary.getInstance().post(formData);
						});

						// Attendre que tous les fichiers pour un client soient envoyés
						await Promise.all(promises);
					}),
				);
				router.push(
					Module.getInstance()
						.get()
						.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", folderUid as string),
				);
				setIsSending(false);
				ToasterService.getInstance().success({ title: "Succès !", description: "Votre document a été envoyée avec succès." });
			} catch (error) {
				setIsSending(false);
				console.warn("Error while sending files: ", error);
			}
		},
		[files, folderUid, router, selectedClients],
	);

	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>) => {
			const selection = e.target.value as EClientSelection;
			setClientSelection(selection);

			if (selection === EClientSelection.ALL_CLIENTS && folder?.customers) {
				const allClientIds = folder.customers.map((customer) => customer.uid ?? "");
				setSelectedClients(allClientIds);
			} else {
				setSelectedClients([]);
			}
		},
		[folder],
	);

	const handleClientSelectionChange = useCallback((selectedOptions: any) => {
		setSelectedClients(selectedOptions.map((option: any) => option.id));
	}, []);

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

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

	const handleFileChange = useCallback((files: File[]) => {
		setFiles(files);
	}, []);

	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>
				<Typography typo={ETypo.TEXT_MD_LIGHT} color={ETypoColor.TEXT_SECONDARY}>
					Voulez-vous envoyer ce document à tous les clients du dossier ou sélectionner certains clients ?{" "}
				</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 && (
						<AutocompleteMultiSelectField
							name="clients"
							label="Choisir le ou les clients: "
							options={clientsOptions}
							onSelectionChange={handleClientSelectionChange}
							validationError={validationError ?? undefined}
						/>
					)}
					{clientSelection && (
						<>
							<DragAndDrop
								name="files"
								title="Glisser ou déposer ou"
								description="Formats acceptés : PDF, JPG, PNG, CSV, XLSX, doc, dox, txt Taille maximale : 100 Mo"
								onChange={handleFileChange}
							/>

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