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, { ITypo } from "../Typography";
import classes from "./classes.module.scss";
import { AnchorStatus } from "@Front/Components/Layouts/Folder/FolderInformation";

type IProps = {
	folder: OfficeFolder;
	type: EFolderBoxInformationType;
	isArchived?: boolean;
	anchorStatus: AnchorStatus;
};

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

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 ?? "");

	const path = type === EFolderBoxInformationType.DESCRIPTION ? editDescriptionPath : editInformationsPath;
	return (
		<div className={classNames(classes["root"], type !== EFolderBoxInformationType.INFORMATIONS && classes["single-information"])}>
			<div className={classes["content"]}>{renderContentByType(props.folder, type)}</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) {
		switch (type) {
			case EFolderBoxInformationType.DESCRIPTION:
				return (
					<div className={classes["text-container"]}>
						<Typography typo={ITypo.NAV_INPUT_16}>Note dossier</Typography>
						<Typography typo={ITypo.P_18}>{folder.description ?? ""}</Typography>
					</div>
				);
			case EFolderBoxInformationType.ARCHIVED_DESCRIPTION:
				return (
					<div className={classes["text-container"]}>
						<Typography typo={ITypo.NAV_INPUT_16}>Note archive</Typography>
						<Typography typo={ITypo.P_18}>{folder.archived_description ?? ""}</Typography>
					</div>
				);
			case EFolderBoxInformationType.INFORMATIONS:
				return (
					<>
						<div className={classes["text-container"]}>
							<Typography typo={ITypo.NAV_INPUT_16}>Intitulé du dossier</Typography>
							<Typography typo={ITypo.P_18}>{folder.name ?? ""}</Typography>
						</div>
						<div className={classes["text-container"]}>
							<Typography typo={ITypo.NAV_INPUT_16}>Numéro de dossier</Typography>
							<Typography typo={ITypo.P_18}>{folder.folder_number ?? ""}</Typography>
						</div>
						<div className={classes["text-container"]}>
							<Typography typo={ITypo.NAV_INPUT_16}>Type d'acte</Typography>
							<Typography typo={ITypo.P_18}>{folder.deed?.deed_type?.name ?? ""}</Typography>
						</div>
						<div className={classes["text-container"]}>
							<Typography typo={ITypo.NAV_INPUT_16}>Ouverture du dossier</Typography>
							<Typography typo={ITypo.P_18}>{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",
	});
}