import PlusIcon from "@Assets/Icons/plus.svg";
import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import UserFolder from "@Front/Components/DesignSystem/UserFolder";
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import Module from "@Front/Config/Module";
import Link from "next/link";
import React from "react";

import classes from "./classes.module.scss";
import { AnchorStatus } from "..";

type IProps = {
	folder: OfficeFolder;
	anchorStatus: AnchorStatus;
	getFolderCallback: () => Promise<void>;
	openedCustomer?: string;
};
type IState = {
	openedCustomer: string;
};

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

	public override render(): JSX.Element {
		const navigatePath = Module.getInstance()
			.get()
			.modules.pages.Folder.pages.AddClient.props.path.replace("[folderUid]", this.props.folder.uid ?? "");
		return (
			<div className={classes["root"]}>
				{this.doesFolderHaveCustomer() ? (
					<>
						<div className={classes["client"]}>{this.renderCustomerFolders()}</div>
						{this.props.anchorStatus === AnchorStatus.NOT_ANCHORED && (
							<Link href={navigatePath}>
								<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.TEXT} rightIcon={<PlusIcon />}>
									Ajouter un client
								</Button>
							</Link>
						)}
					</>
				) : (
					<div className={classes["no-client"]}>
						<div className={classes["title"]}>
							<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
								Aucun client n'est associé au dossier.
							</Typography>
						</div>
						{this.props.anchorStatus === AnchorStatus.NOT_ANCHORED && (
							<Link href={navigatePath}>
								<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.TEXT} rightIcon={<PlusIcon />}>
									Ajouter un client
								</Button>
							</Link>
						)}
					</div>
				)}
			</div>
		);
	}

	private renderCustomerFolders() {
		const output = this.props.folder.customers?.map((customer) => {
			if (!customer) return null;
			return (
				<UserFolder
					folder={this.props.folder}
					customer={customer}
					key={customer.uid}
					isOpened={this.state.openedCustomer === customer.uid}
					onChange={this.changeUserFolder}
					anchorStatus={this.props.anchorStatus}
					getFolderCallback={this.props.getFolderCallback}
				/>
			);
		});
		return output ?? null;
	}

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

	private doesFolderHaveCustomer(): boolean {
		if (!this.props.folder?.customers) return false;
		return this.props.folder?.customers!.length > 0;
	}
}