import React from "react";
import classes from "./classes.module.scss";
import { Document } from "le-coffre-resources/dist/Customer";
import Typography, { ETypo } from "../../Typography";
import DocumentNotary from "../../Document/DocumentNotary";
import classNames from "classnames";

type IProps = {
	title: string;
	subtitle?: string;
	documents:
		| {
				uid?: Document["uid"];
				document_type?: Document["document_type"];
				document_status: Document["document_status"];
				folder?: Document["folder"];
		  }[]
		| null;
	openDeletionModal: (uid: Document["uid"]) => void;
	folderUid: string;
	className?: string;
};
type IState = {};

export default class DocumentList extends React.Component<IProps, IState> {
	public override render(): JSX.Element {
		const classNameToAdd = this.props.className ? classNames(classes["root"], this.props.className) : classes["root"];
		return (
			<div className={classNameToAdd}>
				<div className={classes["title"]}>
					<Typography typo={ETypo.TEXT_LG_SEMIBOLD}>{this.props.title}</Typography>
				</div>
				<Typography typo={ETypo.TEXT_MD_REGULAR}>{this.props.subtitle}</Typography>
				<div className={classes["content"]}>
					{this.props.documents &&
						this.props.documents.map((document) => {
							return (
								<DocumentNotary
									folderUid={this.props.folderUid}
									document={document}
									key={document.uid}
									openDeletionModal={this.props.openDeletionModal}
								/>
							);
						})}
				</div>
			</div>
		);
	}
}