import ValidIcon from "@Assets/Icons/check-valid.svg";
import TrashIcon from "@Assets/Icons/trash.svg";
import classNames from "classnames";
import { Document } from "le-coffre-resources/dist/Customer";
import Image from "next/image";
import { NextRouter, useRouter } from "next/router";
import React from "react";

import Typography, { ITypo } from "../../Typography";
import WarningBadge from "../../WarningBadge";
import classes from "./classes.module.scss";
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";

type IProps = {
	folderUid: string;
	document: {
		uid?: Document["uid"];
		document_type?: Document["document_type"];
		document_status: Document["document_status"];
		folder?: Document["folder"];
		files?: Document["files"];
	};
	openDeletionModal?: (uid: Document["uid"]) => void;
};

type IPropsClass = IProps & {
	router: NextRouter;
};

type IState = {};

class DocumentNotaryClass extends React.Component<IPropsClass, IState> {
	public constructor(props: IPropsClass) {
		super(props);
		this.onOpenDeletionModal = this.onOpenDeletionModal.bind(this);
		this.onClick = this.onClick.bind(this);
	}
	public override render(): JSX.Element {
		return (
			<div className={classNames(classes["root"], classes[this.props.document.document_status])} onClick={this.onClick}>
				<div>
					<Typography typo={ITypo.P_SB_16}>{this.props.document?.document_type?.name}</Typography>
					<Typography typo={ITypo.CAPTION_14}>{this.getDocumentsTitle()}</Typography>
				</div>
				{this.renderIcon()}
			</div>
		);
	}

	private getDocumentsTitle() {
		const documentFiles = this.props.document.files;
		if (documentFiles) {
			if (documentFiles.length === 1) {
				const fileName = documentFiles[0]?.file_path?.split("/").pop();
				if (fileName && fileName.length > 20) {
					return `${fileName.substring(0, 7)}...${fileName.substring(fileName.length - 7, fileName.length)}`;
				} else {
					return fileName;
				}
			} else {
				const archivedFilesLenght = documentFiles.filter((file) => file.archived_at).length;
				const documentFileLenght = documentFiles.length - archivedFilesLenght;
				return `${documentFileLenght} documents déposés`;
			}
		} else {
			return "Aucun document déposé";
		}
	}

	private onClick() {
		if (
			this.props.document.document_status !== EDocumentStatus.VALIDATED &&
			this.props.document.document_status !== EDocumentStatus.DEPOSITED
		)
			return;
		this.props.router.push(`/folders/${this.props.folderUid}/documents/${this.props.document.uid}`);
	}

	private renderIcon(): JSX.Element {
		switch (this.props.document.document_status) {
			case "VALIDATED":
				return (
					<div className={classes["valid-radius"]}>
						<Image src={ValidIcon} alt="valid icon" />
					</div>
				);
			case EDocumentStatus.DEPOSITED:
				return <WarningBadge />;
			default:
				return <Image src={TrashIcon} alt="trash icon" className={classes["trash"]} onClick={this.onOpenDeletionModal} />;
		}
	}

	private onOpenDeletionModal(): void {
		if (!this.props.openDeletionModal) return;
		this.props.openDeletionModal(this.props.document.uid ?? "");
	}
}

export default function DocumentNotary(props: IProps): JSX.Element {
	const router = useRouter();
	return <DocumentNotaryClass {...props} router={router} />;
}