import ValidateAnchoringGif from "@Front/Assets/images/validate_anchoring.gif";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import CheckBox from "@Front/Components/DesignSystem/CheckBox";
import FilePreview from "@Front/Components/DesignSystem/FilePreview";
import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Image from "next/image";
import React from "react";

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

type IProps = {};
type IState = {
	isRefuseModalVisible: boolean;
	isValidateModalVisible: boolean;
	refuseText: string;
	hasValidateAnchoring: boolean;
};

export default class ViewDocuments extends BasePage<IProps, IState> {
	public constructor(props: IProps) {
		super(props);

		this.state = {
			isValidateModalVisible: false,
			isRefuseModalVisible: false,
			refuseText: "",
			hasValidateAnchoring: false,
		};

		this.closeModals = this.closeModals.bind(this);
		this.openValidateModal = this.openValidateModal.bind(this);
		this.openRefuseModal = this.openRefuseModal.bind(this);
		this.onRefuseTextChange = this.onRefuseTextChange.bind(this);
		this.validateAnchoring = this.validateAnchoring.bind(this);
	}

	public override render(): JSX.Element {
		return (
			<DefaultNotaryDashboard
				title={"Demander des documents"}
				onSelectedFolder={() => {}}
				hasBackArrow
				mobileBackText="Retour aux documents">
				<div className={classes["root"]}>
					<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
						App 23 rue Torus Toulon
					</Typography>
					<Typography typo={ITypo.H3} color={ITypoColor.PURPLE_FLASH} className={classes["subtitle"]}>
						Diagnostic électricité
					</Typography>
					<div className={classes["file-container"]}>
						<FilePreview href="https://minteed-stg-euwest3-s3.s3.eu-west-3.amazonaws.com/Qmf_Yb_Eh_X9st_F_Srq_Ve_Bj_Yb_Aj56xv_AV_Nj6_Wjypo_B4r5ubce_U_ae3303e7ab.pdf" />
					</div>
					<div className={classes["buttons-container"]}>
						<Button variant={EButtonVariant.GHOST} onClick={this.openRefuseModal}>
							Refuser
						</Button>
						<Button onClick={this.openValidateModal}>Valider et ancrer</Button>
						<Button disabled>Télécharger</Button>
					</div>
					<Confirm
						isOpen={this.state.isValidateModalVisible}
						onClose={this.closeModals}
						onAccept={this.validateAnchoring}
						closeBtn={!this.state.hasValidateAnchoring}
						hasContainerClosable={!this.state.hasValidateAnchoring}
						header={this.state.hasValidateAnchoring ? "Document en cours de validation" : "Ancrer le document"}
						cancelText={"Annuler"}
						confirmText={"Confirmer"}
						showButtons={!this.state.hasValidateAnchoring}>
						<div className={classes["validate-document-container"]}>
							{!this.state.hasValidateAnchoring && (
								<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["validate-text"]}>
									Êtes-vous sûr de vouloir ancrer ce document ?
								</Typography>
							)}
							{this.state.hasValidateAnchoring && (
								<div className={classes["document-validating-container"]}>
									<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["validate-text"]}>
										Le document s'ancre dans la blockchain.
									</Typography>
									<Image src={ValidateAnchoringGif} alt="Anchoring animation" className={classes["validate-gif"]} />
									<div className={classes["dont-show-again"]}>
										<CheckBox option={{ label: "Ne plus afficher ce message", value: false }} toolTip={"Test"} />
									</div>
								</div>
							)}
						</div>
					</Confirm>
					<Confirm
						isOpen={this.state.isRefuseModalVisible}
						onClose={this.closeModals}
						onAccept={this.closeModals}
						closeBtn
						header={"Refuser le document ?"}
						cancelText={"Annuler"}
						confirmText={"Refuser"}
						canConfirm={this.state.refuseText !== ""}>
						<div className={classes["refuse-document-container"]}>
							<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["refuse-text"]}>
								Veuillez indiquer au client le motif du refus de son document afin qu'il puisse vous renvoyer une bonne
								version.
							</Typography>
							<InputField fakeplaceholder="Motif du refus" textarea onChange={this.onRefuseTextChange} />
						</div>
					</Confirm>
				</div>
			</DefaultNotaryDashboard>
		);
	}

	private validateAnchoring() {
		this.setState({
			hasValidateAnchoring: true,
		});
	}

	private onRefuseTextChange(e: React.ChangeEvent<HTMLInputElement>) {
		this.setState({
			refuseText: e.target.value,
		});
	}

	private openValidateModal() {
		this.setState({
			isValidateModalVisible: true,
		});
	}

	private openRefuseModal() {
		this.setState({
			isRefuseModalVisible: true,
		});
	}

	private closeModals() {
		this.setState({
			isValidateModalVisible: false,
			isRefuseModalVisible: false,
		});
	}
}