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;
};
type IState = {};

export default class FolderBoxInformation extends React.Component<IProps, IState> {
	public static defaultProps = {
		isDescription: false,
	};

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

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