lecoffre-front/src/front/Components/DesignSystem/UserFolder/index.tsx

import ChevronIcon from "@Assets/Icons/chevron.svg";
import PlusIcon from "@Assets/Icons/plus.svg";
import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import classNames from "classnames";
import Customer, { Document } from "le-coffre-resources/dist/Customer";
import Image from "next/image";
import React from "react";

import Button, { EButtonVariant } from "../Button";
import Confirm from "../Modal/Confirm";
import QuantityProgressBar from "../QuantityProgressBar";
import classes from "./classes.module.scss";
import DocumentList from "./DocumentList";
import UserFolderHeader from "./UserFolderHeader";

type IProps = {
	customer: Customer;
	animationDelay?: number;
	folder: IDashBoardFolder;
};
type IState = {
	isOpen: boolean;
	isOpenDeletionModal: boolean;
	willClose: boolean;
};

export default class UserFolder extends React.Component<IProps, IState> {
	static defaultProps = {
		animationDelay: 300,
	};
	public rootRefElement = React.createRef<HTMLDivElement>();

	constructor(props: IProps) {
		super(props);
		this.state = {
			isOpen: false,
			isOpenDeletionModal: false,
			willClose: false,
		};
		this.toggleOpen = this.toggleOpen.bind(this);
		this.closeDeletionModal = this.closeDeletionModal.bind(this);
		this.openDeletionModal = this.openDeletionModal.bind(this);
		this.openComponent = this.openComponent.bind(this);
		this.closeComponent = this.closeComponent.bind(this);
	}
	public override render(): JSX.Element {
		const documentsAsked: Document[] | null = this.getDocumentsByStatus("ASKED");
		const otherDocuments: Document[] | null = this.getValidatedAndPendindDocuments();

		return (
			<div className={classes["root"]}>
				<Confirm
					isOpen={this.state.isOpenDeletionModal}
					onClose={this.closeDeletionModal}
					closeBtn
					header={"Supprimer la demande de document ?"}
					cancelText={"Cancel"}
					confirmText={"Confirmer"}>
					Êtes-vous vous de vouloir supprimer la demande de document ?
				</Confirm>

				<div className={classes["header"]} onClick={this.toggleOpen}>
					<UserFolderHeader contact={this.props.customer.contact} />
					<Image
						src={ChevronIcon}
						alt="chevron open close"
						className={classNames(classes["chevron-icon"], this.state.isOpen && classes["open"])}
						onClick={this.toggleOpen}
					/>
				</div>

				{this.state.isOpen && (
					<div className={classes["container"]} data-will-close={this.state.willClose.toString()} ref={this.rootRefElement}>
						<QuantityProgressBar
							title="Complétion du dossier"
							total={100}
							currentNumber={this.calculateDocumentsPercentageProgress()}
						/>
						<div className={classes["content"]}>
							<DocumentList
								documents={documentsAsked}
								title="Documents demandés"
								openDeletionModal={this.openDeletionModal}
							/>
							<DocumentList
								documents={otherDocuments}
								title="Documents à valider / validés"
								subtitle="Vous avez des documents à valider."
								openDeletionModal={this.openDeletionModal}
							/>
						</div>
						<div className={classes["button-container"]}>
							<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
								Demander un autre document{" "}
							</Button>
							<Button>Envoyer un mail de demande de documents</Button>
						</div>
					</div>
				)}
			</div>
		);
	}

	public override componentDidUpdate(): void {
		this.rootRefElement.current?.style.setProperty("--animation-delay", this.props.animationDelay!.toString().concat("ms"));
	}

	private calculateDocumentsPercentageProgress(): number {
		if (!this.props.customer.documents) return 0;
		const totalDocuments: number = this.props.customer.documents.length;
		const numberDocumentsAsked: number = this.getDocumentsByStatus("ASKED")?.length || 0;
		return Math.round(((totalDocuments - numberDocumentsAsked) / totalDocuments) * 100);
	}

	private getDocumentsByStatus(status: string): Document[] | null {
		if (!this.props.customer.documents) return null;
		return this.props.customer.documents.filter(
			(document) => document.document_status === status && document.folder.uid === this.props.folder.uid,
		);
	}

	// Get all documents Validated, pending
	private getValidatedAndPendindDocuments(): Document[] | null {
		const pendingDocuments = this.getDocumentsByStatus("PENDING");
		const validatedDocuments = this.getDocumentsByStatus("VALIDATED");
		if (!pendingDocuments && !validatedDocuments) return null;
		pendingDocuments?.push(...validatedDocuments!);
		return pendingDocuments;
	}

	// TODO: REFACTO this because the other documents should only be correspond to other documents of the props folders
	// private getOtherDocuments(documentToExclude: Document[] | null): Document[] | null {
	// 	if (!this.props.customer.documents) return null;
	// 	if (!documentToExclude) return this.props.customer.documents;
	// 	return this.props.customer.documents.filter((document) => !documentToExclude.includes(document));
	// }

	private toggleOpen(): void {
		if (this.state.isOpen) {
			this.closeComponent();
		} else {
			this.openComponent();
		}
	}

	private openComponent(): void {
		this.setState({
			isOpen: true,
		});
	}

	private closeComponent(): void {
		if (this.state.willClose) return;
		this.setState({ willClose: true });
		window.setTimeout(() => {
			this.setState({
				isOpen: false,
				willClose: false,
			});
		}, this.props.animationDelay);
	}

	private openDeletionModal(uid: string): void {
		// TODO: call API to delete document
		this.setState({
			isOpenDeletionModal: true,
		});
	}
	private closeDeletionModal(): void {
		this.setState({
			isOpenDeletionModal: false,
		});
	}
}