import React from "react";
import classes from "./classes.module.scss";
import Image from "next/image";
import LogoIcon from "@Assets/logo_standard_neutral.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";
import LifeBuoy from "@Assets/Icons/life_buoy.svg";
import Stripe from "@Front/Api/LeCoffreApi/Admin/Stripe/Stripe";
import JwtService from "@Front/Services/JwtService/JwtService";
import Subscriptions from "@Front/Api/LeCoffreApi/Admin/Subscriptions/Subscriptions";
import Typography, { ETypo, ETypoColor } from "../Typography";
import { InformationCircleIcon } from "@heroicons/react/24/outline";

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;
	cancelAt: Date | null;
};

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,
			cancelAt: null,
		};
		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);
		this.loadSubscription = this.loadSubscription.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={Module.getInstance().get().modules.pages.Folder.props.path}>
							<Image src={LogoIcon} alt="logo" className={classes["logo"]} />
						</Link>
					</div>
					{this.props.isUserConnected && (
						<>
							<Navigation />
							<div className={classes["right-section"]}>
								<div className={classes["help-section"]}>
									<Link href="https://tally.so/r/mBGaNY" target="blank">
										<Image src={LifeBuoy} alt="help" />
									</Link>
								</div>
								<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>
				{this.state.cancelAt && (
					<div className={classes["subscription-line"]}>
						<InformationCircleIcon height="24" />;
						<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
							Assurez vous de sauvegarder tout ce dont vous avez besoin avant la fin de votre abonnement le{" "}
							{this.state.cancelAt.toLocaleDateString()}.
						</Typography>
					</div>
				)}
			</>
		);
	}

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

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

	public async loadSubscription() {
		const jwt = JwtService.getInstance().decodeJwt();
		const subscription = await Subscriptions.getInstance().get({ where: { office: { uid: jwt?.office_Id } } });
		if (subscription[0]) {
			const stripeSubscription = await Stripe.getInstance().getStripeSubscriptionByUid(subscription[0].stripe_subscription_id!);
			if (stripeSubscription.cancel_at !== null)
				this.setState({
					...this.state,
					cancelAt: new Date(stripeSubscription.cancel_at! * 1000),
				});
		}
	}
	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} />;
}
