lecoffre-front/src/front/Components/DesignSystem/FolderBoxInformation/index.tsx

import PenICon from "@Assets/Icons/pen.svg";
import Module from "@Front/Config/Module";
import classNames from "classnames";
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import Image from "next/image";
import Link from "next/link";
import React from "react";

import Typography, { ETypo, ETypoColor } from "../Typography";
import classes from "./classes.module.scss";
import { AnchorStatus } from "@Front/Components/Layouts/Folder/FolderInformation";
import Note from "le-coffre-resources/dist/Customer/Note";

type IProps = {
	folder: OfficeFolder;
	type: EFolderBoxInformationType;
	isArchived?: boolean;
	anchorStatus: AnchorStatus;
	customerUid?: string;
	note?: Note | null;
};

export enum EFolderBoxInformationType {
	INFORMATIONS = "informations",
	DESCRIPTION = "description",
	ARCHIVED_DESCRIPTION = "archivedDescription",
	NOTE = "note",
}

export default function FolderBoxInformation(props: IProps) {
	const { isArchived = false, type } = props;
	const editDescriptionPath = Module.getInstance()
		.get()
		.modules.pages.Folder.pages.EditDescription.props.path.replace("[folderUid]", props.folder.uid ?? "");
	const editInformationsPath = Module.getInstance()
		.get()
		.modules.pages.Folder.pages.EditInformations.props.path.replace("[folderUid]", props.folder.uid ?? "");

	let createOrUpdateNotePath = Module.getInstance()
		.get()
		.modules.pages.Notes.pages.EditNote.props.path.replace("[noteUid]", props.note?.uid ?? "");
	if (!props.note) {
		createOrUpdateNotePath = Module.getInstance()
			.get()
			.modules.pages.Notes.pages.CreateNote.props.path.replace("[folderUid]", props.folder.uid ?? "");
		createOrUpdateNotePath = createOrUpdateNotePath.replace("[customerUid]", props.customerUid ?? "");
	}

	let path = editInformationsPath;

	if (type === EFolderBoxInformationType.DESCRIPTION) {
		path = editDescriptionPath;
	} else if (type === EFolderBoxInformationType.NOTE) {
		path = createOrUpdateNotePath;
	}

	return (
		<div className={classNames(classes["root"], type !== EFolderBoxInformationType.INFORMATIONS && classes["single-information"])}>
			<div className={classes["content"]}>{renderContentByType(props.folder, type, props.note)}</div>
			{!isArchived && props.anchorStatus === AnchorStatus.NOT_ANCHORED && (
				<Link href={path} className={classes["edit-icon-container"]}>
					<Image src={PenICon} alt="edit informations" />
				</Link>
			)}
		</div>
	);

	function renderContentByType(folder: OfficeFolder, type: EFolderBoxInformationType, note?: Note | null) {
		switch (type) {
			case EFolderBoxInformationType.DESCRIPTION:
				return (
					<div className={classes["text-container"]}>
						<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
							Note dossier
						</Typography>
						<Typography typo={ETypo.TEXT_LG_REGULAR}>{folder.description ?? ""}</Typography>
					</div>
				);
			case EFolderBoxInformationType.NOTE:
				return (
					<div className={classes["text-container"]}>
						<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
							Note client
						</Typography>
						<Typography typo={ETypo.TEXT_LG_REGULAR}>{note?.content ?? ""}</Typography>
					</div>
				);
			case EFolderBoxInformationType.ARCHIVED_DESCRIPTION:
				return (
					<div className={classes["text-container"]}>
						<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
							Note archive
						</Typography>
						<Typography typo={ETypo.TEXT_LG_REGULAR}>{folder.archived_description ?? ""}</Typography>
					</div>
				);
			case EFolderBoxInformationType.INFORMATIONS:
				return (
					<>
						<div className={classes["text-container"]}>
							<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
								Intitulé du dossier
							</Typography>
							<Typography typo={ETypo.TEXT_LG_REGULAR}>{folder.name ?? ""}</Typography>
						</div>
						<div className={classes["text-container"]}>
							<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
								Numéro de dossier
							</Typography>
							<Typography typo={ETypo.TEXT_LG_REGULAR}>{folder.folder_number ?? ""}</Typography>
						</div>
						<div className={classes["text-container"]}>
							<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
								Type d'acte
							</Typography>
							<Typography typo={ETypo.TEXT_LG_REGULAR}>{folder.deed?.deed_type?.name ?? ""}</Typography>
						</div>
						<div className={classes["text-container"]}>
							<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
								Ouverture du dossier
							</Typography>
							<Typography typo={ETypo.TEXT_LG_REGULAR}>{formatDate(folder.created_at)}</Typography>
						</div>
					</>
				);
		}
	}
}

function formatDate(date: Date | null): string {
	if (!date) return "...";
	if (!(date instanceof Date)) date = new Date(date);
	return date.toLocaleDateString("fr-FR", {
		year: "numeric",
		month: "long",
		day: "numeric",
	});
}