import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Link from "next/link";
import { useRouter } from "next/router";
import React from "react";

import FolderContainer from "../FolderContainer";
import classes from "./classes.module.scss";
import Module from "@Front/Config/Module";
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";

type IProps = {
	folders: IDashBoardFolder[];
	isArchived: boolean;
	onSelectedFolder?: (folder: IDashBoardFolder) => void;
	onCloseLeftSide?: () => void;
};

type IPropsClass = IProps & {
	selectedFolder: string;
};

type IState = {};

class FolderListClass extends React.Component<IPropsClass, IState> {
	public override render(): JSX.Element {
		const redirectPath: string = this.props.isArchived
			? Module.getInstance().get().modules.pages.Folder.pages.FolderArchived.pages.FolderInformation.props.path
			: Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path;
		return (
			<div className={classes["root"]}>
				{this.props.folders
					.sort((folder) => {
						const pendingDocuments = (folder.documents ?? []).filter(
							(document) => document.document_status === EDocumentStatus.DEPOSITED,
						);
						return pendingDocuments.length >= 1 ? -1 : 1;
					})
					.sort((folder1, folder2) => {
						return folder1.created_at! < folder2.created_at! ? -1 : 1;
					})
					.sort((folder1, folder2) => {
						return folder1.folder_number! < folder2.folder_number! ? -1 : 1;
					})
					.map((folder) => {
						return (
							<div
								onClick={this.props.onCloseLeftSide}
								key={folder.uid}
								className={folder.uid === this.props.selectedFolder ? classes["active"] : ""}>
								<Link href={redirectPath.replace("[folderUid]", folder.uid ?? "")}>
									<FolderContainer folder={folder} onSelectedFolder={this.props.onSelectedFolder} />;
								</Link>
							</div>
						);
					})}
				;
			</div>
		);
	}
}

export default function FolderList(props: IProps) {
	const router = useRouter();
	let { folderUid } = router.query;
	folderUid = folderUid as string;
	return <FolderListClass {...props} selectedFolder={folderUid} />;
}