import React from "react";
import classes from "./classes.module.scss";
import Image from "next/image";
import LogoIcon from "@Assets/logo.svg";
import Link from "next/link";
import Navigation from "./Navigation";
import Notifications from "./Notifications";
import Profile from "./Profile";
import BurgerMenu from "./BurgerMenu";
import WindowStore from "@Front/Stores/WindowStore";
import Module from "@Front/Config/Module";
import Head from "next/head";
import { useRouter } from "next/router";
import LogoCielNatureIcon from "./logo-ciel-notaires.jpeg";

enum EHeaderOpeningState {
	OPEN = "open",
	CLOSED = "closed",
	IDLE = "idle",
}

type IProps = {
	isUserConnected: boolean;
};

type IPropsClass = IProps & {
	isOnCustomerLoginPage: boolean;
};

type IState = {
	open: EHeaderOpeningState;
	isBurgerMenuOpen: boolean;
	isNotificationMenuOpen: boolean;
	isProfileMenuOpen: boolean;
};

class HeaderClass extends React.Component<IPropsClass, IState> {
	private onWindowResize = () => {};
	private headerBreakpoint = 1300;

	constructor(props: IPropsClass) {
		super(props);

		this.state = {
			open: EHeaderOpeningState.OPEN,
			isBurgerMenuOpen: false,
			isNotificationMenuOpen: false,
			isProfileMenuOpen: false,
		};
		this.openBurgerMenu = this.openBurgerMenu.bind(this);
		this.closeBurgerMenu = this.closeBurgerMenu.bind(this);
		this.openNotificationMenu = this.openNotificationMenu.bind(this);
		this.closeNotificationMenu = this.closeNotificationMenu.bind(this);
		this.closeProfileMenu = this.closeProfileMenu.bind(this);
		this.openProfileMenu = this.openProfileMenu.bind(this);
	}
	public override render(): JSX.Element {
		return (
			<div className={classes["root"]} data-open={this.state.open}>
				<Head>
					<link rel="shortcut icon" href={"/favicon.svg"} />
				</Head>
				<div className={classes["logo-container"]}>
					<Link href={"#"}>
						<Image src={LogoIcon} alt="logo" className={classes["logo"]} />
					</Link>
				</div>
				{this.props.isUserConnected && (
					<>
						<Navigation />
						<div className={classes["right-section"]}>
							<div className={classes["notification-section"]}>
								<Notifications
									isModalOpen={this.state.isNotificationMenuOpen}
									openNotificationModal={this.openNotificationMenu}
									closeNotificationModal={this.closeNotificationMenu}
								/>
							</div>
							<div className={classes["profile-section"]}>
								<Profile
									isModalOpen={this.state.isProfileMenuOpen}
									closeProfileModal={this.closeProfileMenu}
									openProfileModal={this.openProfileMenu}
								/>
							</div>
							<div className={classes["burger-menu"]}>
								<BurgerMenu
									isModalOpen={this.state.isBurgerMenuOpen}
									closeBurgerMenu={this.closeBurgerMenu}
									openBurgerMenu={this.openBurgerMenu}
								/>
							</div>
						</div>
					</>
				)}
				{this.props.isOnCustomerLoginPage && <Image width={70} height={70} alt="ciel-nature" src={LogoCielNatureIcon}></Image>}
			</div>
		);
	}

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

	public override componentWillUnmount() {
		this.onWindowResize();
	}

	private onResize(window: Window) {
		if (window.innerWidth > this.headerBreakpoint && this.state.isBurgerMenuOpen) this.setState({ isBurgerMenuOpen: false });
		if (window.innerWidth < this.headerBreakpoint && this.state.isProfileMenuOpen) this.setState({ isProfileMenuOpen: false });
	}

	private openBurgerMenu() {
		this.setState({ isBurgerMenuOpen: true });
	}

	private closeBurgerMenu() {
		this.setState({ isBurgerMenuOpen: false });
	}

	private openNotificationMenu() {
		this.setState({ isNotificationMenuOpen: true });
	}

	private closeNotificationMenu() {
		this.setState({ isNotificationMenuOpen: false });
	}

	private openProfileMenu() {
		this.setState({ isProfileMenuOpen: true });
	}

	private closeProfileMenu() {
		this.setState({ isProfileMenuOpen: false });
	}
}

export default function Header(props: IProps) {
	const router = useRouter();
	const { pathname } = router;
	let isActive = Module.getInstance().get().modules.pages.CustomersLogin.props.path === pathname;
	return <HeaderClass {...props} isOnCustomerLoginPage={isActive} />;
}
