import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import { TrashIcon } from "@heroicons/react/24/outline";
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import { useMemo } from "react";

import AddClientSection from "./AddClientSection";
import classes from "./classes.module.scss";
import DeleteFolderModal from "./DeleteFolderModal";
import useOpenable from "@Front/Hooks/useOpenable";
import { AnchorStatus } from "..";

type IProps = {
	folder: OfficeFolder;
	anchorStatus: AnchorStatus;
};

export default function NoClientView(props: IProps) {
	const { folder, anchorStatus } = props;

	const deleteFolderModal = useOpenable();
	const canDeleteFolder = useMemo(() => folder.documents?.length === 0 && folder.customers?.length === 0, [folder]);

	return (
		<section className={classes["root"]}>
			{anchorStatus === AnchorStatus.NOT_ANCHORED && <AddClientSection folderUid={folder?.uid ?? ""} />}
			{canDeleteFolder && (
				<>
					<Button
						className={classes["delete-button"]}
						variant={EButtonVariant.ERROR}
						styletype={EButtonstyletype.TEXT}
						rightIcon={<TrashIcon />}
						onClick={deleteFolderModal.open}
						size={EButtonSize.SM}>
						Supprimer le dossier
					</Button>
					<DeleteFolderModal isOpen={deleteFolderModal.isOpen} onClose={deleteFolderModal.close} folder={folder} />
				</>
			)}
		</section>
	);
}