import LogoIcon from "@Assets/logo_small_blue.svg";
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Separator, { ESeperatorColor, ESeperatorDirection } from "@Front/Components/DesignSystem/Separator";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import HelpBox from "@Front/Components/Elements/HelpBox";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module";
import useUser from "@Front/Hooks/useUser";
import { DocumentIcon } from "@heroicons/react/24/outline";
import EFolderStatus from "le-coffre-resources/dist/Customer/EFolderStatus";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import classes from "./classes.module.scss";

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

export default function Folder() {
	const [_isArchivedModalOpen, _setIsArchivedModalOpen] = useState(true);
	const router = useRouter();

	const { user: activeUser } = useUser();

	useEffect(() => {
		// TODO: review
		FolderService.getFolders().then((processes: any[]) => {
			if (processes.length > 0) {
				let folders: any[] = processes.map((process: any) => process.processData);

				// FilterBy status
				folders = folders.filter((folder: any) => folder.status === EFolderStatus.LIVE);

				if (folders.length > 0) {
					router.push(
						Module.getInstance()
							.get()
							.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", folders[0].uid)
					);
				}
			}
		});

		/*
		Folders.getInstance()
			.get({
				q: {
					where: { status: EFolderStatus.LIVE },
					orderBy: { created_at: "desc" },
				},
			})
			.then((folders) => {
				if (folders.length > 0)
					router.push(
						Module.getInstance()
							.get()
							.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", folders[0]?.uid ?? ""),
					);
			});
			*/
	}, [router]);
	return (
		<DefaultNotaryDashboard title={"Dossier"} mobileBackText={"Liste des dossiers"}>
			<div className={classes["root"]}>
				<div className={classes["content"]}>
					<div className={classes["title-container"]}>
						<Image src={LogoIcon} alt="logo" />

						{activeUser && activeUser.contact && (
							<Typography typo={ETypo.TITLE_H1} color={ETypoColor.TEXT_ACCENT}>
								Bonjour {activeUser.contact.first_name}, bienvenue sur LeCoffre.io
							</Typography>
						)}
						{!activeUser ||
							(!activeUser.contact && (
								<Typography typo={ETypo.TITLE_H1} color={ETypoColor.TEXT_ACCENT}>
									Bonjour, bienvenue sur LeCoffre.io
								</Typography>
							))}
						<Typography typo={ETypo.TEXT_LG_REGULAR}>
							Commencez par créer votre{" "}
							<Typography typo={ETypo.TEXT_LG_SEMIBOLD} type="span">
								premier dossier
							</Typography>{" "}
							pour profiter de toutes les fonctionnalités de notre plateforme sécurisée.
						</Typography>
					</div>

					<div className={classes["no-folder"]}>
						<DocumentIcon width={32} />
						<div className={classes["text-container"]}>
							<Typography typo={ETypo.TEXT_LG_SEMIBOLD}>Aucun dossier créé</Typography>
							<Typography typo={ETypo.TEXT_MD_REGULAR}>
								Vous n'avez pas encore de dossier créé. En quelques clics, commencez un nouveau dossier pour organiser et
								sécuriser vos documents notariés.
							</Typography>
						</div>
						<Link href={Module.getInstance().get().modules.pages.Folder.pages.CreateFolder.props.path}>
							<Button variant={EButtonVariant.INFO}>Créer votre premier dossier</Button>
						</Link>
					</div>

					<div className={classes["help-container"]}>
						<HelpBox
							title="Besoin d'aide ?"
							description="Consultez nos guides pour bien démarrer."
							button={{ text: "Accéder aux guides" }}
						/>

						<Separator
							className={classes["desktop"]}
							direction={ESeperatorDirection.VERTICAL}
							size={128}
							color={ESeperatorColor.LIGHT}
						/>
						<Separator className={classes["mobile"]} direction={ESeperatorDirection.HORIZONTAL} color={ESeperatorColor.LIGHT} />

						<HelpBox
							title="Vous avez des questions ?"
							description="Notre équipe de support est là pour vous aider."
							button={{ text: "Contactez le support" }}
						/>
					</div>
				</div>
			</div>
		</DefaultNotaryDashboard>
	);
}