import React from "react";
import classes from "./classes.module.scss";
import Typography, { ITypo } from "../Typography";
import Image from "next/image";
import ChevronIcon from "@Assets/Icons/chevron.svg";
import WarningBadge from "../WarningBadge";
import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";

type IProps = {
	folder: IDashBoardFolder;
	onSelectedFolder?: (folder: IDashBoardFolder) => void;
};
type IState = {};

export default class FolderContainer extends React.Component<IProps, IState> {
	public constructor(props: IProps) {
		super(props);
		this.onSelectedFolder = this.onSelectedFolder.bind(this);
	}

	public override render(): JSX.Element {
		return (
			<div className={classes["root"]} onClick={this.onSelectedFolder}>
				<div className={classes["left-side"]}>
					<Typography typo={ITypo.P_16}>
						{this.props.folder.folder_number.concat(" - ").concat(this.props.folder.name)}
					</Typography>
					{this.countPendingDocuments() > 0 && (
						<div className={classes["warning"]}>
							<WarningBadge />
						</div>
					)}
				</div>
				<Image alt="chevron" src={ChevronIcon} />
			</div>
		);
	}

	private countPendingDocuments(): number {
		if (!this.props.folder.documents) return 0;
		return this.props.folder.documents?.filter((document) => document.document_status === "PENDING").length ?? 0;
	}

	private onSelectedFolder(): void {
		this.props.onSelectedFolder && this.props.onSelectedFolder(this.props.folder);
	}
}