import "reflect-metadata";
import React, { ReactNode } from "react";
import classes from "./classes.module.scss";
import FolderListContainer from "@Front/Components/DesignSystem/FolderListContainer";
import Header from "@Front/Components/DesignSystem/Header";
import Version from "@Front/Components/DesignSystem/Version";
import { folders } from "@Front/Components/Layouts/DesignSystem/dummyData";
import { OfficeFolder } from "le-coffre-resources/dist/Customer";
import chevronIcon from "@Assets/Icons/chevron.svg";
import Image from "next/image";
import classNames from "classnames";
import WindowStore from "@Front/Stores/WindowStore";
type IProps = {
	title: string;
	children?: ReactNode;
	onSelectedFolder: (folder: IDashBoardFolder) => void;
};
type IState = {
	folders: IDashBoardFolder[];
	isLeftSideOpen: boolean;
	leftSideCanBeClosed: boolean;
};

export type IDashBoardFolder = {
	uid: OfficeFolder["uid"];
	name: OfficeFolder["name"];
	folder_number: OfficeFolder["folder_number"];
	documents?: OfficeFolder["documents"];
	description: OfficeFolder["description"];
	deed: OfficeFolder["deed"];
	created_at: OfficeFolder["created_at"];
	office_folder_has_customers?: OfficeFolder["office_folder_has_customers"];
};
export default class DefaultNotaryDashboard extends React.Component<IProps, IState> {
	private onWindowResize = () => {};
	public static defaultProps = {
		scrollTop: 0,
	};

	public constructor(props: IProps) {
		super(props);
		this.state = {
			folders: folders,
			isLeftSideOpen: false,
			leftSideCanBeClosed: typeof window !== "undefined" ? window.innerWidth < 1024 : false,
		};
		this.onOpenLeftSide = this.onOpenLeftSide.bind(this);
		this.onCloseLeftSide = this.onCloseLeftSide.bind(this);
	}

	public override render(): JSX.Element {
		return (
			<div className={classes["root"]}>
				<Header isUserConnected={true} />
				<div className={classes["content"]}>
					{this.state.isLeftSideOpen && <div className={classes["overlay"]} onClick={this.onCloseLeftSide} />}
					<div className={classNames(classes["left-side"], this.state.isLeftSideOpen && classes["opened"])}>
						<FolderListContainer
							folders={this.state.folders}
							onSelectedFolder={this.props.onSelectedFolder}
							onCloseLeftSide={this.onCloseLeftSide}
						/>
					</div>
					<div className={classNames(classes["closable-left-side"])}>
						<Image alt="open side menu" src={chevronIcon} className={classes["chevron-icon"]} onClick={this.onOpenLeftSide} />
					</div>
					<div className={classes["right-side"]}>{this.props.children}</div>
				</div>
				<Version />
			</div>
		);
	}

	public override componentDidMount(): void {
		this.onWindowResize = WindowStore.getInstance().onResize((window) => this.onResize(window));
	}
	public override componentWillUnmount() {
		this.onWindowResize();
	}

	private onOpenLeftSide() {
		this.setState({ isLeftSideOpen: true });
	}

	private onCloseLeftSide() {
		if (!this.state.leftSideCanBeClosed) return;
		this.setState({ isLeftSideOpen: false });
	}

	private onResize(window: Window) {
		if (window.innerWidth > 1023) {
			if (!this.state.leftSideCanBeClosed) return;
			this.setState({ leftSideCanBeClosed: false });
		}
		this.setState({ leftSideCanBeClosed: true });
	}
}