import React from "react";
import classes from "./classes.module.scss";
import SearchBar, { IFolder } from "../SearchBar";
import Button from "../Button";
import FolderList from "../FolderList";

type IProps = {
	folders: IFolder[];
};
type IState = {
	filteredFolders: IFolder[];
};

export default class FolderListContainer extends React.Component<IProps, IState> {
	public constructor(props: IProps) {
		super(props);
		this.state = {
			filteredFolders: this.props.folders,
		};
		this.filterFolders = this.filterFolders.bind(this);
	}

	public override render(): JSX.Element {
		return <div className={classes["root"]}>
			<div>
				<div className={classes["searchbar"]}>
					<SearchBar folders={this.props.folders} onChange={this.filterFolders} />
				</div>
				<FolderList folders={this.state.filteredFolders} />
			</div>
			<div>

				<Button fullwidth={"true"}>Créer un dossier</Button>
			</div>
		</div>;
	}

	private filterFolders(folders: IFolder[]): IFolder[] {
		this.setState({ filteredFolders: folders })
		return folders;
	}
}
