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 { OfficeFolder } from "le-coffre-resources/dist/Notary";
import WarningBadge from "../WarningBadge";

type IProps = {
	folder: {
		folder_number: OfficeFolder["folder_number"];
		documents?: OfficeFolder["documents"];
	};
}
type IState = {};

export default class FolderContainer extends React.Component<IProps, IState> {
	public override render(): JSX.Element {
		return <div className={classes["root"]}>
			<div className={classes["left-side"]}>
				<Typography typo={ITypo.P_16}>{"Dossier ".concat(this.props.folder.folder_number)}</Typography>
				{this.countPendingDocuments() > 0 && <WarningBadge />}
				
			</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;
	}
}