import PenIcon from "@Assets/Icons/pen.svg";
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import Module from "@Front/Config/Module";
import { Customer } from "le-coffre-resources/dist/Notary";
import Image from "next/image";
import Link from "next/link";
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 = {
	customer: Customer;
	folder: OfficeFolder;
	isArchived?: boolean;
};
type IState = {};

export default class UserFolderHeader extends React.Component<IProps, IState> {
	static defaultProps = {
		isArchived: false,
	};
	public override render(): JSX.Element | null {
		const redirectPath = Module.getInstance()
			.get()
			.modules.pages.Folder.pages.EditClient.props.path.replace("[folderUid]", this.props.folder.uid ?? "")
			.replace("[customerUid]", this.props.customer.uid ?? "");
		if (!this.props.customer.contact) return null;
		return (
			<div className={classes["root"]}>
				<div className={classes["content"]}>
					<div className={classes["container"]}>
						<Typography typo={ITypo.NAV_INPUT_16}>Nom</Typography>
						<Typography typo={ITypo.P_18}>{this.props.customer.contact.last_name}</Typography>
					</div>

					<div className={classes["container"]}>
						<Typography typo={ITypo.NAV_INPUT_16}>Prénom</Typography>
						<Typography typo={ITypo.P_18}>{this.props.customer.contact.first_name}</Typography>
					</div>

					<div className={classes["container"]}>
						<Typography typo={ITypo.NAV_INPUT_16}>Numéro de téléphone</Typography>
						<Typography typo={ITypo.P_18}>
							{this.formatPhoneNumber(this.props.customer.contact.cell_phone_number) ??
								this.formatPhoneNumber(this.props.customer.contact.phone_number?.toString() ?? "")}
						</Typography>
					</div>

					<div className={classes["container"]}>
						<Typography typo={ITypo.NAV_INPUT_16}>E-mail</Typography>
						<Typography typo={ITypo.P_18}>{this.props.customer.contact.email}</Typography>
					</div>
				</div>
				{!this.props.isArchived && (
					<div className={classes["icons"]}>
						{this.hasPendingFiles() && <WarningBadge />}
						<Link href={redirectPath}>
							<Image src={PenIcon} alt="edit" className={classes["edit-icon"]} onClick={this.onEditClick} />
						</Link>
					</div>
				)}
			</div>
		);
	}

	private hasPendingFiles() {
		const documents =
			this.props.folder.documents?.filter((document) => document.depositor?.contact?.uid === this.props.customer.contact?.uid) ?? [];
		const notAskedDocuments = documents.filter((document) => document.document_status === EDocumentStatus.DEPOSITED) ?? [];
		return notAskedDocuments.length > 0;
	}

	private formatPhoneNumber(phoneNumber: string): string {
		if (!phoneNumber) return "";
		phoneNumber = phoneNumber.replace(/ /g, "");
		phoneNumber = phoneNumber.replace("+33", "0");

		if (phoneNumber.length !== 10) {
			// split the last 9 digits
			const lastNineDigits = phoneNumber.slice(-9);

			// get the country code
			const countryCode = phoneNumber.slice(0, -9);

			// isolate the first digit
			const firstDigit = lastNineDigits.slice(0, 1);

			// isolate the 8 other ones
			const lastEightDigits = lastNineDigits.slice(1);

			// make a space every two digits on the last eights
			const output = lastEightDigits.split("").map((char, index) => {
				if (index % 2) return char + " ";
				return char;
			});
			// format the phone number
			phoneNumber = countryCode + " " + firstDigit + " " + output.join("");
			return phoneNumber;
		}
		const output = phoneNumber.split("").map((char, index) => {
			if (index % 2) return char + " ";
			return char;
		});
		return output.join("");
	}

	private onEditClick(): void {}
}