//import Customers from "@Front/Api/LeCoffreApi/Customer/Customers/Customers";
import Button, { EButtonstyletype, 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/OldModal/Confirm";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import Base from "@Front/Components/Layouts/Base";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import Customer, { Document, DocumentType } from "le-coffre-resources/dist/Customer";
import React from "react";

import classes from "./classes.module.scss";

type IProps = {};
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={ETypo.TITLE_H3}>Documents supplémentaires (facultatif)</Typography>
						<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
							Vous souhaitez envoyer d'autres documents à votre notaire ?
						</Typography>
						<Button
							variant={EButtonVariant.PRIMARY}
							styletype={EButtonstyletype.OUTLINED}
							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={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
								Vous souhaitez envoyer un autre document à votre notaire ?
							</Typography>
							<TextField placeholder="Nom du document" />
							<Typography typo={ETypo.TEXT_MD_REGULAR} 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.hydrate<Document>({
									document_type: DocumentType.hydrate<DocumentType>({
										name: "Autres documents",
									}),
								})}
							/>
						</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={ETypo.DISPLAY_LARGE} className={classes["title"]}>
						Bonjour {this.state.mockedCustomer?.contact?.first_name.concat(" ", this.state.mockedCustomer?.contact?.last_name)}
					</Typography>

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

					<Typography typo={ETypo.TEXT_MD_REGULAR} 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>
			</div>
		);
	}

	// public override async componentDidMount() {
	// 	// TODO Get documents of the current customer according to userStore
	// 	// REMOVE this mock

	// 	const jwt = JwtService.getInstance().decodeJwt();
	// 	const mockedCustomers = await Customers.getInstance().get({
	// 		where: { contact: { email: jwt?.email } },
	// 	});
	// 	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 });
	}
}