import DepositDocumentIcon from "@Assets/Icons/deposit-document.svg";
import CrossIcon from "@Assets/Icons/cross.svg";
import DocumentCheckIcon from "@Assets/Icons/document-check.svg";
import PlusIcon from "@Assets/Icons/plus.svg";

import Image from "next/image";
import React from "react";

import Typography, { ETypo, ETypoColor } from "../Typography";
import classes from "./classes.module.scss";
import { Document } from "le-coffre-resources/dist/Customer";
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
import classNames from "classnames";

import Button, { EButtonstyletype, EButtonVariant } from "../Button";
import Confirm from "../OldModal/Confirm";
import Alert from "../OldModal/Alert";

import LoaderService from "src/common/Api/LeCoffreApi/sdk/Loader/LoaderService";
import DocumentService from "src/common/Api/LeCoffreApi/sdk/DocumentService";
import FileService from "src/common/Api/LeCoffreApi/sdk/FileService";
import CustomerService from "src/common/Api/LeCoffreApi/sdk/CustomerService";

type IProps = {
	onChange?: (files: File[]) => void;
	open: boolean;
	onClose?: () => void;
	document: Document;
	customer_uid: string;
	folder_uid: string | string[];
};

type IFile = {
	index: number;
	file: File;
	fileName: string;
};

type IState = {
	files: IFile[];
	isDragOver: boolean;
	currentFiles?: IFile[];
	refusedReason?: string;
	isShowRefusedReasonModalVisible: boolean;
	showFailedUploaded: string | null;
	showFailedDocument: string | null;
	isAddDocumentModalVisible: boolean;
	isLoading: boolean;
};

export default class DepositOtherDocument extends React.Component<IProps, IState> {
	private inputRef = React.createRef<HTMLInputElement>();
	private index = 0;

	public constructor(props: IProps) {
		super(props);

		this.state = {
			isAddDocumentModalVisible: this.props.open,
			files: [],
			isDragOver: false,
			refusedReason: "",
			isShowRefusedReasonModalVisible: false,
			showFailedUploaded: null,
			isLoading: false,
			showFailedDocument: null,
		};

		this.addDocument = this.addDocument.bind(this);
		this.onFileChange = this.onFileChange.bind(this);
		this.removeFile = this.removeFile.bind(this);
		this.onDragOver = this.onDragOver.bind(this);
		this.onDragDrop = this.onDragDrop.bind(this);
		this.onDragLeave = this.onDragLeave.bind(this);
		this.onAccept = this.onAccept.bind(this);
		this.onCloseAlertUpload = this.onCloseAlertUpload.bind(this);
	}

	public override render(): JSX.Element {
		return (
			<div>
				<Confirm
					isOpen={this.state.isAddDocumentModalVisible}
					onClose={this.props.onClose!}
					onAccept={this.onAccept}
					closeBtn
					header={"Ajouter un document"}
					cancelText={"Annuler"}
					confirmText={this.state.isLoading ? "Chargement..." : "Déposer le document"}
					canConfirm={!this.state.isLoading}>
					<div className={classes["modal-content"]}>
						<div className={classes["container"]}>
							<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
								Vous souhaitez envoyer un autre document à votre notaire ?
							</Typography>
							<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>
							<div
								className={classNames(
									classes["root"],
									this.props.document.document_status === EDocumentStatus.VALIDATED && classes["validated"],
								)}
								onDragOver={this.onDragOver}
								onDrop={this.onDragDrop}
								onDragLeave={this.onDragLeave}
								data-drag-over={this.state.isDragOver.toString()}>
								<input type="file" ref={this.inputRef} hidden onChange={this.onFileChange} />
								<div className={classes["top-container"]}>
									<div className={classes["left"]}>
										<Image src={DepositDocumentIcon} alt="Deposit document" />
									</div>
									<div className={classes["separator"]} />
									<div className={classes["right"]}>
										<Typography
											typo={ETypo.TEXT_MD_SEMIBOLD}
											color={ETypoColor.COLOR_GENERIC_BLACK}
											className={classes["title"]}>
											<div
												className={
													this.props.document.document_status === EDocumentStatus.VALIDATED
														? classes["validated"]
														: ""
												}>
												{this.props.document.document_type?.name}
											</div>
										</Typography>
										<Typography color={ETypoColor.COLOR_NEUTRAL_500} typo={ETypo.TEXT_SM_REGULAR}>
											Sélectionnez des documents .jpg, .pdf ou .png
										</Typography>
									</div>
								</div>
								{this.state.currentFiles && this.state.currentFiles.length > 0 && (
									<div className={classes["documents-container"]}>
										{this.state.currentFiles.map((file) => {
											const fileObj = file.file;

											return (
												<div className={classes["file-container"]} key={fileObj.name}>
													<div className={classes["left-part"]}>
														<Image src={DocumentCheckIcon} alt="Document check" />
														<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
															{this.shortName(fileObj.name)}
														</Typography>
													</div>
													<Image
														src={CrossIcon}
														alt="Cross icon"
														className={classes["cross"]}
														onClick={this.removeFile}
														data-file={file.index}
													/>
												</div>
											);
										})}
									</div>
								)}
								<div className={classes["bottom-container"]}>
									<Button
										variant={EButtonVariant.PRIMARY}
										styletype={EButtonstyletype.TEXT}
										className={classes["add-button"]}
										onClick={this.addDocument}>
										<Typography
											typo={ETypo.TEXT_MD_SEMIBOLD}
											color={ETypoColor.COLOR_PRIMARY_500}
											className={classes["add-document"]}>
											Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
										</Typography>
									</Button>
								</div>
							</div>
						</div>
					</div>
				</Confirm>
				{this.state.showFailedDocument && (
					<Alert
						onClose={this.onCloseAlertUpload}
						header={"L'ajout de Document n'est plus autorisé"}
						isOpen={!!this.state.showFailedDocument}>
						<div className={classes["modal-content"]}>
							<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
								{this.state.showFailedDocument}
							</Typography>
						</div>
					</Alert>
				)}
				{this.state.showFailedUploaded && (
					<Alert onClose={this.onCloseAlertUpload} header={"Fichier non autorisé"} isOpen={!!this.state.showFailedUploaded}>
						<div className={classes["modal-content"]}>
							<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
								{this.state.showFailedUploaded}
							</Typography>
						</div>
					</Alert>
				)}
			</div>
		);
	}

	public override componentDidMount(): void { }

	private onCloseAlertUpload() {
		this.setState({ showFailedUploaded: null });
	}

	private async onAccept() {
		this.setState({
			isLoading: true,
		});

		const filesArray = this.state.currentFiles;
		if (!filesArray) return;

		LoaderService.getInstance().show();
		let documentCreated: any;
		try {
			documentCreated = await new Promise<any>((resolve: (document: any) => void) => {
				const documentTypeData: any = {
					folder: {
						uid: this.props.folder_uid,
					},
					depositor: {
						uid: this.props.customer_uid,
					}
				};
				const validatorId: string = '884cb36a346a79af8697559f16940141f068bdf1656f88fa0df0e9ecd7311fb8:0';

				DocumentService.createDocument(documentTypeData, validatorId).then((processCreated: any) => {
					if (processCreated) {
						const document: any = processCreated.processData;
						resolve(document);
					}
				});
			});
		} catch (e) {
			this.setState({ showFailedDocument: "Le dossier est vérifié aucune modification n'est acceptée", isLoading: false });
			return;
		}

		const customer: any = await new Promise<void>((resolve: (customer: any) => void) => {
			CustomerService.getCustomerByUid(this.props.customer_uid).then((process: any) => {
				if (process) {
					const customer: any = process.processData;
					resolve(customer);
				}
			});
		});

		for (let i = 0; i < filesArray.length; i++) {
			const file = filesArray[i]!.file;
			await new Promise<void>((resolve: () => void) => {
				const reader = new FileReader();
				reader.onload = (event) => {
					if (event.target?.result) {
						const date: Date = new Date();
						const strDate: string = `${date.getDate().toString().padStart(2, '0')}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getFullYear()}`;

						const fileName: string = `aplc-${file.name.split('.')[0]}-${strDate}.${file.name.split('.').pop()}`;

						const arrayBuffer: ArrayBuffer = event.target.result as ArrayBuffer;
						const uint8Array: Uint8Array = new Uint8Array(arrayBuffer);

						const fileBlob: any = {
							type: file.type,
							data: uint8Array
						};

						const fileData: any = {
							file_blob: fileBlob,
							file_name: fileName
						};
						const validatorId: string = '884cb36a346a79af8697559f16940141f068bdf1656f88fa0df0e9ecd7311fb8:0';

						FileService.createFile(fileData, validatorId).then((processCreated: any) => {
							const fileUid: string = processCreated.processData.uid;

							DocumentService.getDocumentByUid(documentCreated.uid).then((process: any) => {
								if (process) {
									const document: any = process.processData;

									let files: any[] = document.files;
									if (!files) {
										files = [];
									}
									files.push({ uid: fileUid });

									DocumentService.updateDocument(process, { files: files, document_status: EDocumentStatus.DEPOSITED }).then(() => resolve());
								}
							});
						});
					}
				};
				reader.readAsArrayBuffer(file);
			});
		}

		this.setState({
			isLoading: false,
		});

		this.props.onClose!();
		window.location.reload();
	}

	private shortName(name: string): string {
		const maxLength = 20;
		if (name.length > maxLength) {
			return name.substring(0, maxLength / 2) + "..." + name.substring(name.length - maxLength / 2, name.length);
		}
		return name;
	}

	private onDragOver(event: React.DragEvent<HTMLDivElement>) {
		if (!this.state.isDragOver) {
			this.setState({
				isDragOver: true,
			});
		}
		event.preventDefault();
	}

	private onDragLeave(event: React.DragEvent<HTMLDivElement>) {
		this.setState({
			isDragOver: false,
		});
		event.preventDefault();
	}

	private async onDragDrop(event: React.DragEvent<HTMLDivElement>) {
		event.preventDefault();
		this.setState({
			isDragOver: false,
		});
		const file = event.dataTransfer.files[0];
		if (file) this.addFile(file);
	}

	private async addFile(file: File) {
		const iFile: IFile = {
			file: file,
			fileName: file.name,
			index: this.index++,
		};
		const tmpArray: IFile[] = this.state.currentFiles || [];
		tmpArray.push(iFile);
		this.setState({
			currentFiles: tmpArray,
		});
		// const formData = new FormData();
		// formData.append("file", file, file.name);
		// const query = JSON.stringify({ document: { uid: this.props.document.uid } });
		// formData.append("q", query);

		// const newFile = await Files.getInstance().post(formData);
		// const newFile: FileCustomer = {
		// 	file_name: file.name,
		// }
		// const files = this.state.currentFiles ? [...this.state.currentFiles, newFile] : [newFile];

		// this.setState({
		// 	currentFiles: files,
		// 	loading: false,
		// 	files: [
		// 		...this.state.files,
		// 		{
		// 			index: this.index++,
		// 			file: file,
		// 			uid: newFile.uid!,
		// 			archived: null,
		// 			fileName: newFile?.file_name ?? "",
		// 		},
		// 	],
		// });

		// if (this.props.onChange) this.props.onChange(this.state.files.map((file) => file.file));
	}

	private async removeFile(e: any) {
		const image = e.target as HTMLElement;
		const indexToRemove = image.getAttribute("data-file");

		if (!indexToRemove) return;
		const file = this.state.currentFiles!.find((file) => file.index === parseInt(indexToRemove));
		if (!file) return;
		this.setState({
			currentFiles: this.state.currentFiles!.filter((file) => file.index !== parseInt(indexToRemove)),
		});

		if (this.props.onChange) this.props.onChange(this.state.currentFiles!.map((file) => file.file));
	}

	private async onFileChange() {
		if (!this.inputRef.current) return;

		const files = this.inputRef.current.files;

		if (!files) {
			return;
		}
		const file = files[0];

		if (file) this.addFile(file);
	}

	private addDocument() {
		if (!this.inputRef.current) return;
		this.inputRef.current.click();
	}

	// private formatDate(date: Date) {
	// 	const dateToConvert = new Date(date);
	// 	return dateToConvert.toLocaleDateString("fr-FR");
	// }
}