import {User} from "@/interfaces/user";
import Link from "next/link";
import FocusLayer from "@/components/FocusLayer";
import {preventNavigation} from "@/utils/navigation.disabled";
import {useRouter} from "next/router";
import {BsList} from "react-icons/bs";
import clsx from "clsx";
import moment from "moment";
import MobileMenu from "./MobileMenu";
import {useState} from "react";

interface Props {
	user: User;
	navDisabled?: boolean;
	focusMode?: boolean;
	onFocusLayerMouseEnter?: () => void;
	path: string;
}

/* eslint-disable @next/next/no-img-element */
export default function Navbar({user, path, navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
	const [isMenuOpen, setIsMenuOpen] = useState(false);

	const disableNavigation = preventNavigation(navDisabled, focusMode);
	const router = useRouter();

	const expirationDateColor = (date: Date) => {
		const momentDate = moment(date);
		const today = moment(new Date());

		if (today.add(1, "days").isAfter(momentDate)) return "!bg-mti-red-ultralight border-mti-red-light";
		if (today.add(3, "days").isAfter(momentDate)) return "!bg-mti-rose-ultralight border-mti-rose-light";
		if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light";
	};

	const showExpirationDate = () => {
		if (!user.subscriptionExpirationDate) return false;

		const momentDate = moment(user.subscriptionExpirationDate);
		const today = moment(new Date());

		return today.add(7, "days").isAfter(momentDate);
	};

	return (
		<>
			{user && <MobileMenu path={path} isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)} user={user} />}
			<header className="w-full bg-transparent py-2 md:py-4 -md:justify-between md:gap-12 flex items-center relative -md:px-4">
				<Link href={disableNavigation ? "" : "/"} className=" md:px-8 flex gap-8 items-center">
					<img src="/logo.png" alt="EnCoach's Logo" className="w-8 md:w-12" />
					<h1 className="font-bold text-2xl w-1/6 -md:hidden">EnCoach</h1>
				</Link>
				<div className="flex justify-end -md:items-center gap-4 md:w-5/6 md:mr-8">
					{showExpirationDate() && (
						<Link
							href="https://encoach.com/join"
							data-tip="Expiry date"
							className={clsx(
								"py-2 px-6 w-fit flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
								"transition duration-300 ease-in-out tooltip tooltip-bottom",
								!user.subscriptionExpirationDate
									? "bg-mti-green-ultralight border-mti-green-light"
									: expirationDateColor(user.subscriptionExpirationDate),
								"bg-white border-mti-gray-platinum",
							)}>
							{!user.subscriptionExpirationDate && "Unlimited"}
							{user.subscriptionExpirationDate && moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
						</Link>
					)}
					<Link href={disableNavigation ? "" : "/profile"} className="flex gap-6 items-center justify-end -md:hidden">
						<img src={user.profilePicture} alt={user.name} className="w-10 h-10 rounded-full object-cover" />
						<span className="text-right -md:hidden">{user.name}</span>
					</Link>
					<div className="cursor-pointer md:hidden" onClick={() => setIsMenuOpen(true)}>
						<BsList className="text-mti-purple-light w-8 h-8" />
					</div>
				</div>
				{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
			</header>
		</>
	);
}