import backgroundImage from "@Assets/images/background_refonte_reverse.svg";
import LogoIcon from "@Assets/logo_small_blue.svg";
import Users from "@Front/Api/LeCoffreApi/Notary/Users/Users";
import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module";
import JwtService from "@Front/Services/JwtService/JwtService";
import { DocumentIcon } from "@heroicons/react/24/outline";
import User, { OfficeFolder } from "le-coffre-resources/dist/Notary";
import Image from "next/image";
import Link from "next/link";
import { useCallback, useEffect, useState } from "react";

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

export default function Folder() {
	const [_folder, setFolder] = useState<OfficeFolder | null>(null);
	const [_isArchivedModalOpen, _setIsArchivedModalOpen] = useState(true);

	const [activeUser, setActiveUser] = useState<User | null>();
	const onSelectedFolder = useCallback((folder: OfficeFolder): void => {
		setFolder(folder);
	}, []);

	useEffect(() => {
		const decodedJwt = JwtService.getInstance().decodeJwt();
		if (!decodedJwt) return;
		Users.getInstance()
			.getByUid(decodedJwt.userId, {
				q: {
					contact: true,
				},
			})
			.then((user) => {
				setActiveUser(user);
			});
	}, []);

	return (
		<DefaultNotaryDashboard
			title={"Dossier"}
			onSelectedFolder={onSelectedFolder}
			mobileBackText={"Liste des dossiers"}
			image={backgroundImage}>
			<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.COLOR_PRIMARY_500}>
								Bonjour {activeUser.contact.first_name}, bienvenue sur LeCoffre.io
							</Typography>
						)}
						{!activeUser ||
							(!activeUser.contact && (
								<Typography typo={ETypo.TITLE_H1} color={ETypoColor.COLOR_PRIMARY_500}>
									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"]}>
						<div className={classes["box"]}>
							<Typography typo={ETypo.TEXT_MD_SEMIBOLD}>Besoin d'aide ?</Typography>
							<Typography typo={ETypo.TEXT_MD_REGULAR}>Consultez nos guides pour bien démarrer.</Typography>
							<Button variant={EButtonVariant.SECONDARY} styletype={EButtonstyletype.TEXT} size={EButtonSize.MD}>
								Accéder aux guides
							</Button>
						</div>
						<div className={classes["separator"]} />

						<div className={classes["box"]}>
							<Typography typo={ETypo.TEXT_MD_SEMIBOLD}>Vous avez des questions ?</Typography>
							<Typography typo={ETypo.TEXT_MD_REGULAR}>Notre équipe de support est là pour vous aider.</Typography>
							<Button variant={EButtonVariant.SECONDARY} styletype={EButtonstyletype.TEXT} size={EButtonSize.MD}>
								Contactez le support
							</Button>
						</div>
					</div>
				</div>
			</div>
		</DefaultNotaryDashboard>
	);
}