import ChevronIcon from "@Assets/Icons/chevron.svg";
import Users, { IGetUsersparams } from "@Front/Api/LeCoffreApi/Admin/Users/Users";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Header from "@Front/Components/DesignSystem/Header";
import Version from "@Front/Components/DesignSystem/Version";
import BackArrow from "@Front/Components/Elements/BackArrow";
import JwtService from "@Front/Services/JwtService/JwtService";
import WindowStore from "@Front/Stores/WindowStore";
import classNames from "classnames";
import User from "le-coffre-resources/dist/Admin";
import Image from "next/image";
import React, { ReactNode } from "react";

import classes from "./classes.module.scss";
import CollaboratorListContainer from "./CollaboratorListContainer";

type IProps = {
	title: string;
	children?: ReactNode;
	onSelectedUser: (user: User) => void;
	hasBackArrow: boolean;
	backArrowUrl?: string;
	mobileBackText?: string;
};
type IState = {
	collaborators: User[] | null;
	isLeftSideOpen: boolean;
	leftSideCanBeClosed: boolean;
};

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

	public constructor(props: IProps) {
		super(props);
		this.state = {
			collaborators: 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.collaborators && (
							<CollaboratorListContainer collaborators={this.state.collaborators} 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.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));
		const jwt = JwtService.getInstance().decodeJwt();
		if (!jwt) return;
		const query: IGetUsersparams = {
			where: { office_uid: jwt.office_Id },
			include: { contact: true },
		};

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