import LeftArrowIcon from "@Assets/Icons/left-arrow.svg";
import RightArrowIcon from "@Assets/Icons/right-arrow.svg";
import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import FilePreview from "@Front/Components/DesignSystem/FilePreview";
import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module";
import { Document, File } from "le-coffre-resources/dist/Notary";
import { EDocumentStatus } from "le-coffre-resources/dist/Notary/Document";
import Image from "next/image";
import { NextRouter, useRouter } from "next/router";
import React from "react";

import BasePage from "../../Base";
import classes from "./classes.module.scss";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import MessageBox from "@Front/Components/Elements/MessageBox";

import DocumentService from "src/common/Api/LeCoffreApi/sdk/DocumentService";
import FileService from "src/common/Api/LeCoffreApi/sdk/FileService";
import { FileBlob } from "@Front/Api/Entities/types";

type IProps = {};
type IPropsClass = {
	documentUid: string;
	router: NextRouter;
	folderUid: string;
};

type IState = {
	isRefuseModalVisible: boolean;
	isValidateModalVisible: boolean;
	refuseText: string;
	selectedFileIndex: number;
	selectedFile: { uid: string; file_name: string; file_blob: FileBlob } | null;
	validatedPercentage: number;
	document: Document | null;
	fileBlob: Blob | null;
	isLoading: boolean;
};

class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
	public constructor(props: IPropsClass) {
		super(props);

		this.state = {
			isValidateModalVisible: false,
			isRefuseModalVisible: false,
			refuseText: "",
			selectedFileIndex: 0,
			selectedFile: null,
			validatedPercentage: this.getRandomPercentageForOcr(),
			document: null,
			fileBlob: null,
			isLoading: true,
		};

		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.validateDocument = this.validateDocument.bind(this);
		this.goToNext = this.goToNext.bind(this);
		this.goToPrevious = this.goToPrevious.bind(this);

		this.hasPrevious = this.hasPrevious.bind(this);
		this.hasNext = this.hasNext.bind(this);
		this.downloadFile = this.downloadFile.bind(this);
		this.refuseDocument = this.refuseDocument.bind(this);
	}

	public override render(): JSX.Element | null {
		return (
			<DefaultNotaryDashboard title={"Demander des documents"} hasBackArrow mobileBackText="Retour aux documents">
				{this.state.document && this.state.document.files && this.state.selectedFile && !this.state.isLoading && (
					<div className={classes["root"]}>
						<Typography typo={ETypo.DISPLAY_LARGE} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
							{this.state.document.folder?.name}
						</Typography>
						<Typography typo={ETypo.TITLE_H5} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["subtitle"]}>
							{this.state.document.document_type?.name}
						</Typography>
						<div className={classes["document-container"]}>
							{this.state.document.files.length > 1 && (
								<div
									className={classes["arrow-container"]}
									onClick={this.goToPrevious}
									data-disabled={(!this.hasPrevious()).toString()}>
									<Image src={LeftArrowIcon} alt="left arrow" />
								</div>
							)}
							<div className={classes["file-container"]}>
								{this.state.selectedFile.file_blob.type === "application/pdf" ||
									this.state.selectedFile.file_blob.type === "image/jpeg" ||
									this.state.selectedFile.file_blob.type === "image/png" ||
									this.state.selectedFile.file_blob.type === "image/jpg" ? (
									<FilePreview
										href={this.state.fileBlob ? URL.createObjectURL(this.state.fileBlob) : ""}
										fileName={this.state.selectedFile.file_name}
										key={this.state.selectedFile.uid}
									/>
								) : (
									<div className={classes["unsupported-format"]}>
										<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
											L'affichage de ce format de fichier n'est pas supporté.
										</Typography>
									</div>
								)}
							</div>
							{this.state.document.files.length > 1 && (
								<div
									className={classes["arrow-container"]}
									onClick={this.goToNext}
									data-disabled={(!this.hasNext()).toString()}>
									<Image src={RightArrowIcon} alt="right arrow" />
								</div>
							)}
						</div>
						<div className={classes["footer"]}>
							{this.state.document?.document_status === EDocumentStatus.DEPOSITED && (
								<div className={classes["alert"]}>
									<MessageBox type={"info"}>Veuillez valider le document afin de pouvoir le télécharger.</MessageBox>
								</div>
							)}
							{/* {this.state.document?.document_type?.name === "Document d'identité" && (
								<div className={classes["ocr-container"]}>
									<OcrResult percentage={this.state.validatedPercentage} />
								</div>
							)} */}

							<div className={classes["buttons-container"]}>
								{this.state.document?.document_status === EDocumentStatus.DEPOSITED && (
									<>
										<Button
											variant={EButtonVariant.PRIMARY}
											styletype={EButtonstyletype.OUTLINED}
											onClick={this.openRefuseModal}>
											Refuser
										</Button>
										<Button onClick={this.openValidateModal}>Valider</Button>
										<Button disabled>Télécharger</Button>
									</>
								)}
								{this.state.document?.document_status === "VALIDATED" && this.state.fileBlob && (
									<Button onClick={this.downloadFile}>Télécharger</Button>
								)}
							</div>
						</div>
						<Confirm
							isOpen={this.state.isValidateModalVisible}
							onClose={this.closeModals}
							onAccept={this.validateDocument}
							closeBtn={true}
							hasContainerClosable={true}
							header={"Valider le document ?"}
							cancelText={"Annuler"}
							confirmText={"Confirmer"}>
							<div className={classes["validate-document-container"]}>
								<Typography
									typo={ETypo.TEXT_MD_REGULAR}
									color={ETypoColor.COLOR_GENERIC_BLACK}
									className={classes["validate-text"]}>
									Êtes-vous sûr de vouloir valider ce document ?
								</Typography>
							</div>
						</Confirm>
						<Confirm
							isOpen={this.state.isRefuseModalVisible}
							onClose={this.closeModals}
							onAccept={this.refuseDocument}
							closeBtn
							header={"Refuser le document ?"}
							cancelText={"Annuler"}
							confirmText={"Refuser"}>
							<div className={classes["refuse-document-container"]}>
								<Typography
									typo={ETypo.TEXT_MD_REGULAR}
									color={ETypoColor.COLOR_GENERIC_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>
								<TextAreaField placeholder="Motif du refus" onChange={this.onRefuseTextChange} />
							</div>
						</Confirm>
					</div>
				)}
				{(!this.state.selectedFile || !this.state.document) && !this.state.isLoading && (
					<div className={classes["root"]}>
						<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["refuse-text"]}>
							Document non trouvé
						</Typography>
					</div>
				)}
			</DefaultNotaryDashboard>
		);
	}

	override async componentDidMount() {
		try {
			const document: any = await new Promise((resolve: (document: any) => void) => {
				DocumentService.getDocumentByUid(this.props.documentUid).then(async (process: any) => {
					if (process) {
						const document: any = process.processData;

						if (document.files && document.files.length > 0) {
							const files: any[] = [];
							for (const file of document.files) {
								files.push((await FileService.getFileByUid(file.uid)).processData);
							}
							document.files = files;
						}

						resolve(document);
					}
				});
			});

			this.setState(
				{
					document,
					selectedFileIndex: 0,
					selectedFile: document.files![0]!,
					isLoading: false,
				},
				() => {
					this.getFilePreview();
				},
			);
		} catch (e) {
			this.setState({
				isLoading: false,
			});
			console.error(e);
		}
	}

	private async getFilePreview(): Promise<void> {
		try {
			if (!this.state.selectedFile) return;
			
			const fileBlob: Blob = new Blob([this.state.selectedFile.file_blob.data], { type: this.state.selectedFile.file_blob.type });
			this.setState({
				fileBlob,
			});
		} catch (e) {
			console.error(e);
		}
	}

	private downloadFile() {
		if (!this.state.fileBlob || !this.state.selectedFile) return;

		const url = URL.createObjectURL(this.state.fileBlob);
		const a = document.createElement('a');
		a.href = url;
		a.download = this.state.selectedFile.file_name;
		document.body.appendChild(a);
		a.click();
		document.body.removeChild(a);
		URL.revokeObjectURL(url);
	}

	private getRandomPercentageForOcr() {
		// find diff
		let difference = 100 - 90;

		// generate random number
		let rand = Math.random();

		// multiply with difference
		rand = Math.floor(rand * difference);

		// add with min value
		rand = rand + 90;

		return rand;
	}

	private goToPrevious() {
		const index = this.state.selectedFileIndex - 1;
		if (this.hasPrevious()) {
			this.setState(
				{
					selectedFile: this.state.document!.files![index]!,
					selectedFileIndex: index,
					fileBlob: null,
				},
				() => {
					this.getFilePreview();
				},
			);
		}
	}

	private goToNext() {
		if (this.hasNext()) {
			const index = this.state.selectedFileIndex + 1;
			this.setState(
				{
					selectedFile: this.state.document!.files![index]!,
					selectedFileIndex: index,
					fileBlob: null,
				},
				() => {
					this.getFilePreview();
				},
			);
		}
	}

	private hasPrevious() {
		const index = this.state.selectedFileIndex - 1;
		return index >= 0;
	}

	private hasNext() {
		const index = this.state.selectedFileIndex + 1;
		return index < this.state.document!.files!.length;
	}

	private async refuseDocument() {
		try {
			DocumentService.getDocumentByUid(this.props.documentUid).then((process: any) => {
				if (process) {
					DocumentService.updateDocument(process, { document_status: EDocumentStatus.REFUSED, refused_reason: this.state.refuseText }).then(() => {
						this.props.router.push(
							Module.getInstance()
								.get()
								.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.folderUid) +
							"?customerUid=" +
							this.state.document?.depositor?.uid,
						);
					});
				}
			});
		} catch (e) {
			console.error(e);
		}
	}

	private async validateDocument() {
		try {
			DocumentService.getDocumentByUid(this.props.documentUid).then((process: any) => {
				if (process) {
					DocumentService.updateDocument(process, { document_status: EDocumentStatus.VALIDATED }).then(() => {
						this.props.router.push(
							Module.getInstance()
								.get()
								.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.folderUid) +
							"?customerUid=" +
							this.state.document?.depositor?.uid,
						);
					});
				}
			});
		} catch (e) {
			console.error(e);
		}
	}

	private onRefuseTextChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) {
		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,
		});
	}
}

export default function ViewDocuments(props: IProps) {
	const router = useRouter();
	let { folderUid, documentUid } = router.query;
	documentUid = documentUid as string;
	folderUid = folderUid as string;
	return <ViewDocumentsClass {...props} documentUid={documentUid} router={router} folderUid={folderUid as string} />;
}