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";

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 === "PENDING");
					return pendingDocuments.length >= 1 ? -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} />;
}