import LogoIcon from "@Assets/logo_standard_neutral.svg";
// import Stripe from "@Front/Api/LeCoffreApi/Admin/Stripe/Stripe";
// import Subscriptions from "@Front/Api/LeCoffreApi/Admin/Subscriptions/Subscriptions";
import Module from "@Front/Config/Module";
// import JwtService from "@Front/Services/JwtService/JwtService";
import { LifebuoyIcon } from "@heroicons/react/24/outline";
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import React, { useCallback, useEffect } from "react";

import IconButton from "../IconButton";
import BurgerMenu from "./BurgerMenu";
import classes from "./classes.module.scss";
import LogoCielNatureIcon from "./logo-ciel-notaires.jpeg";
import Navigation from "./Navigation";
import Notifications from "./Notifications";
import Profile from "./Profile";

type IProps = {
	isUserConnected: boolean;
};

const headerHeight = 75;

export default function Header(props: IProps) {
	const { isUserConnected } = props;

	const router = useRouter();
	const { pathname } = router;
	const isOnCustomerLoginPage = Module.getInstance().get().modules.pages.CustomersLogin.props.path === pathname;

	// const [cancelAt, setCancelAt] = useState<Date | null>(null);

	const loadSubscription = useCallback(async () => {
		/* TODO: review
		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) {
				setCancelAt(new Date(stripeSubscription.cancel_at! * 1000));
			}
		}
		*/
	}, []);

	useEffect(() => {
		document.documentElement.style.setProperty("--header-height", `${headerHeight}px`);
		loadSubscription();
	}, [loadSubscription]);

	return (
		<>
			<div className={classes["root"]}>
				<Head>
					<link rel="shortcut icon" href={"/favicon.svg"} />
				</Head>
				<div className={classes["logo-container"]}>
					<Link href={isUserConnected ? Module.getInstance().get().modules.pages.Folder.props.path : "#"}>
						<Image src={LogoIcon} alt="logo" className={classes["logo"]} />
					</Link>
				</div>
				{isUserConnected && (
					<>
						<div className={classes["desktop"]}>
							<Navigation />
						</div>
						<div className={classes["right-section"]}>
							<div className={classes["desktop"]}>
								<Link href="https://tally.so/r/mBGaNY" target="_blank">
									<IconButton icon={<LifebuoyIcon />} />
								</Link>
							</div>
							<Notifications />
							<div className={classes["desktop"]}>
								<Profile />
							</div>
							<div className={classes["mobile"]}>
								<BurgerMenu />
							</div>
						</div>
					</>
				)}
				{isOnCustomerLoginPage && <Image width={70} height={70} alt="ciel-nature" src={LogoCielNatureIcon}></Image>}
			</div>
			{/* {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{" "}
						{cancelAt.toLocaleDateString()}.
					</Typography>
				</div>
			)} */}
		</>
	);
}
