import Folders, { IGetFoldersParams } from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import EFolderStatus from "le-coffre-resources/dist/Customer/EFolderStatus";
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import React, { ReactNode, useCallback, useEffect } from "react";
import { EDocumentStatus } from "le-coffre-resources/dist/Notary/Document";

import Module from "@Front/Config/Module";
import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
import { useRouter } from "next/router";
import DefaultDashboardWithList from "../DefaultDashboardWithList";

type IProps = {
	title: string;
	children?: ReactNode;
	isArchived?: boolean;
	hasBackArrow?: boolean;
	backArrowUrl?: string;
	mobileBackText?: string;
};

export default function DefaultNotaryDashboard(props: IProps) {
	const { isArchived } = props;
	const router = useRouter();
	const [folders, setFolders] = React.useState<OfficeFolder[]>([]);
	const { folderUid } = router.query;

	const redirectPath: string = isArchived
		? Module.getInstance().get().modules.pages.Folder.pages.FolderArchived.pages.FolderInformation.props.path
		: Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path;

	const getBlocks = useCallback(
		(folders: OfficeFolder[]): IBlock[] => {
			const pendingFolders = folders
				.filter((folder) => {
					const pendingDocuments = (folder.documents ?? []).filter(
						(document) => document.document_status === EDocumentStatus.DEPOSITED,
					);
					return pendingDocuments.length >= 1;
				})
				.sort((folder1, folder2) => {
					return folder1.created_at! > folder2.created_at! ? -1 : 1;
				});

			const otherFolders = folders
				.filter((folder) => {
					const pendingDocuments = (folder.documents ?? []).filter(
						(document) => document.document_status === EDocumentStatus.DEPOSITED,
					);
					return pendingDocuments.length === 0;
				})
				.sort((folder1, folder2) => {
					return folder1.created_at! > folder2.created_at! ? -1 : 1;
				});

			return [...pendingFolders, ...otherFolders].map((folder) => {
				return {
					id: folder.uid!,
					primaryText: folder.name,
					secondaryText: folder.folder_number,
					isActive: folderUid === folder.uid,
					showAlert: folder.documents?.some((document) => document.document_status === EDocumentStatus.DEPOSITED),
				};
			});
		},
		[folderUid],
	);

	const [blocks, setBlocks] = React.useState<IBlock[]>(getBlocks(folders));

	const onSelectedBlock = (block: IBlock) => {
		const folder = folders.find((folder) => folder.uid === block.id);
		if (!folder) return;
		const path = redirectPath.replace("[folderUid]", folder.uid ?? "");
		router.push(path);
	};

	useEffect(() => {
		setBlocks(getBlocks(folders));
	}, [folders, getBlocks]);

	useEffect(() => {
		let targetedStatus: EFolderStatus = EFolderStatus["LIVE" as keyof typeof EFolderStatus];
		if (isArchived) targetedStatus = EFolderStatus.ARCHIVED;
		const query: IGetFoldersParams = {
			q: {
				where: { status: targetedStatus },
				include: {
					deed: { include: { deed_type: true } },
					office: true,
					customers: {
						include: {
							contact: true,
							documents: {
								include: {
									folder: true,
									document_type: true,
									files: true,
								},
							},
						},
					},
					documents: {
						include: {
							depositor: {
								include: {
									contact: true,
								},
							},
						},
					},
				},
			},
		};

		Folders.getInstance()
			.get(query)
			.then((folders) => setFolders(folders));
	}, [isArchived]);

	return (
		<DefaultDashboardWithList
			{...props}
			onSelectedBlock={onSelectedBlock}
			blocks={blocks}
			bottomButton={{
				link: Module.getInstance().get().modules.pages.Folder.pages.CreateFolder.props.path,
				text: "Créer un dossier",
			}}
		/>
	);
}
