import "reflect-metadata";

import ChevronIcon from "@Assets/Icons/chevron.svg";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import FolderListContainer from "@Front/Components/DesignSystem/FolderListContainer";
import Header from "@Front/Components/DesignSystem/Header";
import Version from "@Front/Components/DesignSystem/Version";
import BackArrow from "@Front/Components/Elements/BackArrow";
import WindowStore from "@Front/Stores/WindowStore";
import classNames from "classnames";
import { OfficeFolder } from "le-coffre-resources/dist/Customer";
import Image from "next/image";
import React, { ReactNode } from "react";

import classes from "./classes.module.scss";
import Folders, { IGetFoldersParams } from "@Front/Api/LeCoffreApi/SuperAdmin/Folders/Folders";
import { EFolderStatus } from "le-coffre-resources/dist/Customer/OfficeFolder";

type IProps = {
	title: string;
	children?: ReactNode;
	isArchived?: boolean;
	onSelectedFolder: (folder: IDashBoardFolder) => void;
	hasBackArrow: boolean;
	backArrowUrl?: string;
	mobileBackText?: string;
};
type IState = {
	folders: IDashBoardFolder[] | null;
	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"];
	archived_description: OfficeFolder["archived_description"];
	status: OfficeFolder["status"];
};

export default class DefaultNotaryDashboard extends React.Component<IProps, IState> {
	private onWindowResize = () => {};
	public static defaultProps: Partial<IProps> = {
		hasBackArrow: false,
		isArchived: false,
	};

	public constructor(props: IProps) {
		super(props);
		this.state = {
			folders: null,
			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"])}>
						{this.state.folders && (
							<FolderListContainer
								folders={this.state.folders}
								onSelectedFolder={this.props.onSelectedFolder}
								onCloseLeftSide={this.onCloseLeftSide}
								isArchived={this.props.isArchived!}
							/>
						)}
					</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.hasBackArrow && (
							<div className={classes["back-arrow-desktop"]}>
								<BackArrow url={this.props.backArrowUrl ?? ""} />
							</div>
						)}
						{this.props.mobileBackText && (
							<div className={classes["back-arrow-mobile"]}>
								<Button
									icon={ChevronIcon}
									iconposition={"left"}
									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
									variant={EButtonVariant.LINE}
									onClick={this.onOpenLeftSide}>
									{this.props.mobileBackText ?? "Retour"}
								</Button>
							</div>
						)}
						{this.props.children}
					</div>
				</div>
				<Version />
			</div>
		);
	}

	public override async componentDidMount() {
		this.onWindowResize = WindowStore.getInstance().onResize((window) => this.onResize(window));
		let targetedStatus: EFolderStatus = EFolderStatus["LIVE" as keyof typeof EFolderStatus];
		if (this.props.isArchived) targetedStatus = EFolderStatus.ARCHIVED;
		const query: IGetFoldersParams = {
			q: {
				where: { status: targetedStatus },
				include: {
					deed: { include: { deed_type: true } },
					office: true,
					office_folder_has_customers: { include: { customer: { include: { contact: true } } } },
					documents: {
						include: {
							depositor:{
								include: {
									contact: true
								}
							}
						}
					}
				},
			},
		};

		const folders = await Folders.getInstance().get(query);
		this.setState({ folders: folders });
	}
	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 });
	}
}