import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import { ArrowDownTrayIcon } from "@heroicons/react/24/outline";
import Customer from "le-coffre-resources/dist/Customer";
import { OfficeFolder as OfficeFolderNotary } from "le-coffre-resources/dist/Notary";
import { useCallback, useEffect, useMemo, useState } from "react";

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

import OfficeRibService from "src/common/Api/LeCoffreApi/sdk/OfficeRibService";

type IProps = {
	folder: OfficeFolderNotary;
	customer: Customer;
};

export default function ContactBox(props: IProps) {
	const { folder, customer } = props;

	const [ribUrl, setRibUrl] = useState<string | null>(null);

	const notaryContact = useMemo(
		() => folder?.stakeholders!.find((stakeholder) => stakeholder.office_role?.name === "Notaire")?.contact ?? folder?.stakeholders![0]!.contact,
		[folder],
	);

	const note = useMemo(
		() =>
			folder?.notes?.find((note) => note.customer?.uid === customer?.uid) ?? {
				content: "Aucune note",
				created_at: new Date(),
				updated_at: new Date(),
			},
		[customer?.uid, folder?.notes],
	);

	useEffect(() => {
		if (!folder?.office?.uid) return;
		OfficeRibService.getOfficeRib().then((process: any) => {
			if (process) {
				const officeRib: any = process.processData;
				const fileBlob: Blob = new Blob([officeRib.file_blob.data], { type: officeRib.file_blob.type });
				setRibUrl(URL.createObjectURL(fileBlob));
			}
		});
	}, [folder]);

	const downloadRib = useCallback(async () => {
		if (!ribUrl) return;
		const a = document.createElement("a");
		a.style.display = "none";
		a.href = ribUrl;
		a.download = "";
		document.body.appendChild(a);
		a.click();
	}, [ribUrl]);

	return (
		<div className={classes["root"]}>
			<div className={classes["left"]}>
				<div>
					<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_700}>
						L’étude de votre notaire
					</Typography>
					<Typography typo={ETypo.TEXT_LG_BOLD} color={ETypoColor.COLOR_PRIMARY_500}>
						{folder?.office?.name ?? "_"}
					</Typography>
				</div>
				<div>
					<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_700}>
						Numéro de téléphone
					</Typography>
					<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_950}>
						{notaryContact?.cell_phone_number ?? notaryContact?.phone_number ?? "_"}
					</Typography>
				</div>
				<div>
					<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_700}>
						E-mail
					</Typography>
					<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_950}>
						{notaryContact?.email ?? "_"}
					</Typography>
				</div>
				<div className={classes["note-and-rib-button"]}>{noteAndRibButton()}</div>
			</div>

			<div className={classes["right"]}>{noteAndRibButton()}</div>
		</div>
	);

	function noteAndRibButton() {
		return (
			<>
				<div>
					<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_700}>
						Note dossier
					</Typography>
					<Typography typo={ETypo.TEXT_LG_REGULAR} type="span" color={ETypoColor.COLOR_NEUTRAL_950} className={classes["text"]}>
						{note?.content ?? "-"}
					</Typography>
				</div>
				{ribUrl && (
					<Button
						fullwidth
						onClick={downloadRib}
						variant={EButtonVariant.PRIMARY}
						size={EButtonSize.LG}
						styletype={EButtonstyletype.CONTAINED}
						rightIcon={<ArrowDownTrayIcon />}>
						Télécharger le RIB de mon notaire
					</Button>
				)}
			</>
		);
	}
}