import React from "react";
import classes from "./classes.module.scss";
import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import UserFolder from "@Front/Components/DesignSystem/UserFolder";

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

export default class ClientSection extends React.Component<IProps, IState> {
	public constructor(props: IProps) {
		super(props);
		this.state = {
			openedCustomer: "",
		};

		this.changeUserFolder = this.changeUserFolder.bind(this);
	}
	
	public override render(): JSX.Element {
		return (
			<div className={classes["root"]}>
				{this.doesFolderHaveCustomer() ? (
					<>
						<div className={classes["client"]}>{this.renderCustomerFolders()}</div>
					</>
				) : (
					<div className={classes["no-client"]}>
						<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
							Aucun client dans ce dossier
						</Typography>
					</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 (
				<UserFolder
					folder={this.props.folder}
					customer={folderHasCustomer.customer}
					key={this.props.folder.uid}
					isOpened={this.state.openedCustomer === this.props.folder.uid}
					onChange={this.changeUserFolder}
				/>
			);
		});
		return output ?? null;
	}

	private changeUserFolder(uid: string) {
		this.setState({
			openedCustomer: uid === this.state.openedCustomer ? "" : uid,
		});
	}

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