import React from "react";
import classes from "./classes.module.scss";
import classNames from "classnames";
import Image from "next/image";
import PenICon from "@Assets/Icons/pen.svg";
import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Typography, { ITypo } from "../Typography";

type IProps = {
	folder: IDashBoardFolder;
	isDescription?: boolean;
};

export default function FolderBoxInformation(props: IProps) {
	const { isDescription = false } = props;

	return <div className={classNames(classes["root"], isDescription && classes["isSignleDescription"])}>
		<div className={classes["content"]}>
			{isDescription ?
				<div className={classes["text-container"]}>
					<Typography typo={ITypo.NAV_INPUT_16}>Note dossier :</Typography>
					<Typography typo={ITypo.P_18}>{props.folder.description ?? "..."}</Typography>
				</div>
				:
				<>
					<div className={classes["text-container"]}>
						<Typography typo={ITypo.NAV_INPUT_16}>Intitulé du dossier</Typography>
						<Typography typo={ITypo.P_18}>{props.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}>{props.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}>{props.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(props.folder.created_at)}</Typography>
					</div>
				</>
			}
		</div>
		<Image src={PenICon} alt="edit informations" className={classes["edit-icon"]} />
	</div>;
}

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