lecoffre-front/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx

import ChevronIcon from "@Assets/Icons/chevron.svg";
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import FolderBoxInformation, { EFolderBoxInformationType } from "@Front/Components/DesignSystem/FolderBoxInformation";
import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module";
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import { NextRouter, useRouter } from "next/router";

import BasePage from "../../Base";
import classes from "./classes.module.scss";
import ClientSection from "./ClientSection";
import Link from "next/link";
import { AnchorStatus } from "../../Folder/FolderInformation";
import { useCallback, useEffect, useState } from "react";
import OfficeFolderAnchors from "@Front/Api/LeCoffreApi/Notary/OfficeFolderAnchors/OfficeFolderAnchors";
import Loader from "@Front/Components/DesignSystem/Loader";

type IProps = {};

type IPropsClass = IProps & {
	router: NextRouter;
	selectedFolderUid: string;
	isLoading: boolean;
	isAnchored: AnchorStatus;
};

type IState = {
	selectedFolder: OfficeFolder | null;
	isArchivedModalOpen: boolean;
};
class FolderInformationClass extends BasePage<IPropsClass, IState> {
	public constructor(props: IPropsClass) {
		super(props);
		this.state = {
			selectedFolder: null,
			isArchivedModalOpen: false,
		};
		this.onSelectedFolder = this.onSelectedFolder.bind(this);
		this.openArchivedModal = this.openArchivedModal.bind(this);
		this.closeArchivedModal = this.closeArchivedModal.bind(this);
		this.restoreFolder = this.restoreFolder.bind(this);
	}

	// TODO: Message if the user has not created any folder yet
	// TODO: get the selected folder from the api in componentDidMount
	public override render(): JSX.Element {
		const redirectPathEditCollaborators = Module.getInstance()
			.get()
			.modules.pages.Folder.pages.EditCollaborators.props.path.replace("[folderUid]", this.props.selectedFolderUid);
		return (
			<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder} isArchived={true}>
				{!this.props.isLoading && (
				<div className={classes["root"]}>
					{this.state.selectedFolder ? (
						<div className={classes["folder-informations"]}>
							<div className={classes["folder-header"]}>
								<div className={classes["header"]}>
									<div className={classes["title"]}>
										<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
									</div>
									<Link href={redirectPathEditCollaborators}>
										<Button variant={EButtonVariant.LINE} icon={ChevronIcon}>
											Modifier les collaborateurs
										</Button>
									</Link>
								</div>
								<FolderBoxInformation
									anchorStatus={this.props.isAnchored}
									folder={this.state.selectedFolder}
									isArchived
									type={EFolderBoxInformationType.INFORMATIONS}
								/>
								<div className={classes["second-box"]}>
									<FolderBoxInformation
										anchorStatus={this.props.isAnchored}
										folder={this.state.selectedFolder}
										isArchived
										type={EFolderBoxInformationType.DESCRIPTION}
									/>
								</div>
								<div className={classes["second-box"]}>
									<FolderBoxInformation
										anchorStatus={this.props.isAnchored}
										folder={this.state.selectedFolder}
										isArchived
										type={EFolderBoxInformationType.ARCHIVED_DESCRIPTION}
									/>
								</div>

								<div className={classes["progress-bar"]}>
									<QuantityProgressBar title="Complétion du dossier" total={100} currentNumber={0} />
								</div>
								{this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} anchorStatus={this.props.isAnchored} />}
							</div>

							{!this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} anchorStatus={this.props.isAnchored} />}

							<div className={classes["button-container"]}>
								<Button variant={EButtonVariant.GHOST} onClick={this.restoreFolder}>
									Restaurer le dossier
								</Button>
							</div>
						</div>
					) : (
						<div className={classes["no-folder-selected"]}>
							<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
							<div className={classes["choose-a-folder"]}>
								<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
									Aucun dossier sélectionné
								</Typography>
							</div>
						</div>
					)}
				</div>
				)}
				{this.props.isLoading && (
					<div className={classes["loader-container"]}>
						<div className={classes["loader"]}>
							<Loader />
						</div>
					</div>
				)}
			</DefaultNotaryDashboard>
		);
	}
	public override async componentDidMount() {
		const folder = await this.getFolder();
		this.setState({ selectedFolder: folder });
	}

	private doesFolderHaveCustomer(): boolean {
		return this.state.selectedFolder?.customers !== undefined;
	}

	private onSelectedFolder(folder: OfficeFolder): void {
		this.setState({ selectedFolder: folder });
	}

	private async restoreFolder() {
		if (!this.state.selectedFolder) return;
		await Folders.getInstance().restore(this.state.selectedFolder.uid ?? "");
		this.props.router.push(
			Module.getInstance()
				.get()
				.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid),
		);
	}

	private openArchivedModal(): void {
		this.setState({ isArchivedModalOpen: true });
	}

	private closeArchivedModal(): void {
		this.setState({ isArchivedModalOpen: false });
	}

	private async getFolder(): Promise<OfficeFolder> {
		const query = {
			q: {
				deed: { include: { deed_type: "true" } },
				office: "true",
				customers: { include: { contact: true } },
			},
		};
		const folder = await Folders.getInstance().getByUid(this.props.selectedFolderUid, query);
		return folder;
	}
}

export default function FolderInformation(props: IProps) {
	const router = useRouter();
	const [isAnchored, setIsAnchored] = useState<AnchorStatus>(AnchorStatus.NOT_ANCHORED);
	const [isLoading, setIsLoading] = useState<boolean>(true);
	const [selectedFolder, setSelectedFolder] = useState<OfficeFolder | null>(null);

	let { folderUid } = router.query;
	folderUid = folderUid as string;

	const getAnchoringStatus = useCallback(async () => {
		if(!folderUid) return;
		setIsLoading(true);
		try {
			const anchorStatus = await OfficeFolderAnchors.getInstance().getByUid(folderUid as string);
			setIsAnchored(anchorStatus.status === "VERIFIED_ON_CHAIN" ? AnchorStatus.VERIFIED_ON_CHAIN : AnchorStatus.ANCHORING);
		} catch (e) {
			setIsAnchored(AnchorStatus.NOT_ANCHORED);
		}
		setIsLoading(false);
	}, [folderUid]);

	const getFolder = useCallback(async () => {
		if (!folderUid) return;
		setIsLoading(true);
		const query = {
			q: {
				deed: { include: { deed_type: true } },
				office: true,
				customers: {
					include: {
						contact: true,
						documents: {
							include: {
								folder: true,
								document_type: true,
								files: true,
							},
						},
					},
				},
				documents: {
					include: {
						depositor: {
							include: {
								contact: true,
							},
						},
					},
				},
				folder_anchor: true,
			},
		};
		const folder = await Folders.getInstance().getByUid(folderUid as string, query);
		if (folder) {
			setSelectedFolder(folder);
			getAnchoringStatus();
		}

		setIsLoading(false);
	}, [folderUid, getAnchoringStatus]);

	useEffect(() => {
		setIsLoading(true);
		getFolder();
	}, [getFolder]);

	return <FolderInformationClass {...props} selectedFolderUid={folderUid} router={router} isLoading={isLoading} isAnchored={isAnchored} />;
}