import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import BasePage from "../Base";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import classes from "./classes.module.scss";
// import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
// import FolderBoxInformation from "@Front/Components/DesignSystem/FolderBoxInformation";
// import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
// import ClientSection from "./ClientSection";
// import ChevronIcon from "@Assets/Icons/chevron.svg";
// import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
// import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";

type IProps = {};
type IState = {
	selectedFolder: IDashBoardFolder | null;
	isArchivedModalOpen: boolean;
};
export default class Folder extends BasePage<IProps, IState> {
	public constructor(props: IProps) {
		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);
	}

	// TODO: Message if the user has not created any folder yet
	public override render(): JSX.Element {
		return (
			<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder}>
				<div className={classes["root"]}>
					<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}>
								Veuillez sélectionner un dossier.
							</Typography>
						</div>
					</div>
				</div>
			</DefaultNotaryDashboard>
		);
	}

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

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

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