import React from "react";
import classes from "./classes.module.scss";
import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import PlusIcon from "@Assets/Icons/plus.svg";
import UserFolder from "@Front/Components/DesignSystem/UserFolder";

type IProps = {
	folder: IDashBoardFolder;
};
type IState = {};

export default class ClientSection extends React.Component<IProps, IState> {
	public override render(): JSX.Element {
		return <div className={classes["root"]}>
			{this.doesFolderHaveCustomer() ?
				<div className={classes["client"]}>
					{this.renderCustomerFolders()}
				</div>
				:
				<div className={classes["no-client"]}>
					<div className={classes["title"]}>
						<Typography typo={ITypo.P_18}>Aucun client n’est associé au dossier.</Typography>
					</div>
					<Button variant={EButtonVariant.LINE} icon={PlusIcon}>Ajouter un client</Button>
				</div>}
		</div>;
	}

	private renderCustomerFolders() {
		const output = this.props.folder.office_folder_has_customers?.map((folderHasCustomer) => {
			if (!folderHasCustomer.customer) return null;
			// TODO : Les documents ASKED fonctionne mais les autres documents ne doivcent etre seulement ceux qui correspondent au folder
			return <div className={classes["user-folder"]}><UserFolder folder={this.props.folder} customer={folderHasCustomer.customer} key={folderHasCustomer.customer.uid} /></div>;
		})
		return output ?? null;
	}

	private doesFolderHaveCustomer(): boolean {
		return this.props.folder.office_folder_has_customers !== undefined;
	}
}