import Documents, { IGetDocumentsparams } from "@Front/Api/LeCoffreApi/SuperAdmin/Documents/Documents";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import DepositDocument from "@Front/Components/DesignSystem/DepositDocument";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Base from "@Front/Components/Layouts/Base";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import React from "react";
import classes from "./classes.module.scss";
import Customers from "@Front/Api/LeCoffreApi/SuperAdmin/Customers/Customers";
import Customer, { Document } from "le-coffre-resources/dist/Customer";
import { document } from "./../../../Components/Layouts/DesignSystem/dummyData";

type IProps = {
	targetedCustormer: string; // MOCK
};
type IState = {
	isAddDocumentModalVisible: boolean;
	documents: Document[];
	mockedCustomer: Customer | null;
};

export default class ClientDashboard extends Base<IProps, IState> {
	public constructor(props: IProps) {
		super(props);
		this.state = {
			isAddDocumentModalVisible: false,
			documents: [],
			mockedCustomer: null,
		};
		this.onCloseModalAddDocument = this.onCloseModalAddDocument.bind(this);
		this.onOpenModalAddDocument = this.onOpenModalAddDocument.bind(this);
	}

	public override render(): JSX.Element {
		return (
			<DefaultTemplate title={"Mon compte"} isPadding={false} hasHeaderLinks={false}>
				<div className={classes["root"]}>
					{this.renderHeader()}
					<div className={classes["sub-container"]}>
						<div className={classes["content"]}>
							{this.state.documents?.map((document) => (
								<DepositDocument document={document} key={document.uid} defaultFiles={document.files ?? []} />
							))}
						</div>
						<Typography typo={ITypo.H2}>Documents supplémentaires (facultatif)</Typography>
						<Typography typo={ITypo.P_16} className={classes["text"]}>
							Vous souhaitez envoyer d'autres documents à votre notaire ?
						</Typography>
						<Button variant={EButtonVariant.GHOST} className={classes["button"]} onClick={this.onOpenModalAddDocument}>
							Ajouter d'autres documents
						</Button>
					</div>
					<Confirm
						isOpen={this.state.isAddDocumentModalVisible}
						onClose={this.onCloseModalAddDocument}
						onAccept={this.onOpenModalAddDocument}
						closeBtn
						header={"Ajouter un document"}
						cancelText={"Annuler"}
						confirmText={"Déposer le document"}>
						<div className={classes["modal-content"]}>
							<Typography typo={ITypo.P_16} className={classes["text"]}>
								Vous souhaitez envoyer un autre document à votre notaire ?
							</Typography>
							<TextField placeholder="Nom du document" />
							<Typography typo={ITypo.P_16} className={classes["text"]}>
								Glissez / Déposez votre document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le
								document correspondant.
							</Typography>
							<DepositDocument document={document} />
						</div>
					</Confirm>
				</div>
			</DefaultTemplate>
		);
	}

	private renderHeader(): JSX.Element {
		return (
			<div className={classes["header"]}>
				<div className={classes["text-container"]}>
					{/* TODO Get name from userStore */}
					<Typography typo={ITypo.H1} className={classes["title"]}>
						Bonjour {this.state.mockedCustomer?.contact?.first_name.concat(" ", this.state.mockedCustomer?.contact?.last_name)}
					</Typography>

					<Typography typo={ITypo.H2} className={classes["subtitle"]}>
						Documents à envoyer
					</Typography>

					<Typography typo={ITypo.P_16} className={classes["text"]}>
						Votre notaire est dans l'attente de documents pour valider votre dossier. Voici la liste des documents.Veuillez
						glisser / déposez chaque document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le
						document correspondant. Si un des documents demandés ne vous concernent pas, veuillez contacter votre notaire à
						l’aide du bouton ci-dessus.
					</Typography>
				</div>
				<a href="mailto:g.texier@notaires.fr" target="_blank">
					<Button className={classes["button"]}>Contacter mon notaire</Button>
				</a>
			</div>
		);
	}

	public override async componentDidMount() {
		// TODO Get documents of the current customer according to userStore
		// REMOVE this mock
		const mockedCustomers = await Customers.getInstance().get({ where: { contact: { email: this.props.targetedCustormer } } });
		const mockedCustomer: Customer = mockedCustomers[0]!;

		const query: IGetDocumentsparams = {
			where: { depositor: { uid: mockedCustomer.uid } },
			include: {
				files: true,
				document_history: true,
				document_type: true,
			},
		};
		const documents: Document[] = await Documents.getInstance().get(query);
		this.setState({ documents, mockedCustomer });
	}

	private onCloseModalAddDocument() {
		this.setState({ isAddDocumentModalVisible: false });
	}

	private onOpenModalAddDocument() {
		this.setState({ isAddDocumentModalVisible: true });
	}
}