encoach_frontend/src/components/Navbar.tsx

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, BsQuestionCircle, BsQuestionCircleFill } from "react-icons/bs";
import clsx from "clsx";
import moment from "moment";
import MobileMenu from "./MobileMenu";
import { useEffect, useState } from "react";
import { Type } from "@/interfaces/user";
import { USER_TYPE_LABELS } from "@/resources/user";
import useGroups from "@/hooks/useGroups";
import { isUserFromCorporate } from "@/utils/groups";
import Button from "./Low/Button";
import Modal from "./Modal";
import Input from "./Low/Input";
import TicketSubmission from "./High/TicketSubmission";
import { Module } from "@/interfaces";
import Badge from "./Low/Badge";

import { BsArrowRepeat, BsBook, BsCheck, BsCheckCircle, BsClipboard, BsHeadphones, BsMegaphone, BsPen, BsXCircle } from "react-icons/bs";
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 [disablePaymentPage, setDisablePaymentPage] = useState(true);
	const [isTicketOpen, setIsTicketOpen] = useState(false);

	const router = useRouter();

	const disableNavigation = preventNavigation(navDisabled, focusMode);

	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);
	};

	useEffect(() => {
		if (user.type !== "student" && user.type !== "teacher") return setDisablePaymentPage(false);
		isUserFromCorporate(user.id).then((result) => setDisablePaymentPage(result));
	}, [user]);

	const badges = [
		{
			module: "reading",
			icon: () => <BsBook className="h-4 w-4 text-white" />,
			achieved: user?.levels?.reading || 0 >= user?.desiredLevels?.reading || 9,
		},

		{
			module: "listening",
			icon: () => <BsHeadphones className="h-4 w-4 text-white" />,
			achieved: user?.levels?.listening || 0 >= user?.desiredLevels?.listening || 9,
		},
		{
			module: "writing",
			icon: () => <BsPen className="h-4 w-4 text-white" />,
			achieved: user?.levels?.writing || 0 >= user?.desiredLevels?.writing || 9,
		},
		{
			module: "speaking",
			icon: () => <BsMegaphone className="h-4 w-4 text-white" />,
			achieved: user?.levels?.speaking || 0 >= user?.desiredLevels?.speaking || 9,
		},
		{
			module: "level",
			icon: () => <BsClipboard className="h-4 w-4 text-white" />,
			achieved: user?.levels?.level || 0 >= user?.desiredLevels?.level || 9,
		},
	];

	return (
		<>
			<Modal isOpen={isTicketOpen} onClose={() => setIsTicketOpen(false)} title="Submit a ticket">
				<TicketSubmission user={user} page={router.asPath} onClose={() => setIsTicketOpen(false)} />
			</Modal>

			{user && (
				<MobileMenu disableNavigation={disableNavigation} path={path} isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)} user={user} />
			)}
			<header className="-md:justify-between -md:px-4 relative flex w-full items-center bg-transparent py-2 md:gap-12 md:py-4">
				<Link href={disableNavigation ? "" : "/"} className=" flex items-center gap-8 md:px-8">
					<img src="/logo.png" alt="EnCoach's Logo" className="w-8 md:w-12" />
					<h1 className="-md:hidden w-1/6 text-2xl font-bold">EnCoach</h1>
				</Link>
				<div className="flex items-center justify-end gap-4 md:mr-8 md:w-5/6">
					{user.type === "student" &&
						badges.map((badge) => (
							<div
								key={badge.module}
								className={`${badge.achieved ? `bg-ielts-${badge.module}` : "bg-mti-gray-anti-flash"
									} flex h-8 w-8 items-center justify-center rounded-full`}>
								{badge.icon()}
							</div>
						))}
					{/* OPEN TICKET SYSTEM */}
					<button
						className={clsx(
							"border-mti-purple-light tooltip tooltip-bottom flex h-8 w-8 flex-col items-center justify-center rounded-full border p-1",
							"hover:bg-mti-purple-light transition duration-300 ease-in-out hover:text-white z-20",
						)}
						data-tip="Submit a help/feedback ticket"
						onClick={() => setIsTicketOpen(true)}>
						<BsQuestionCircleFill />
					</button>

					{showExpirationDate() && (
						<Link
							href={!!user.subscriptionExpirationDate && !disablePaymentPage ? "/payment" : ""}
							data-tip="Expiry date"
							className={clsx(
								"flex w-fit cursor-pointer justify-center rounded-full border px-6 py-2 text-sm font-normal focus:outline-none",
								"tooltip tooltip-bottom transition duration-300 ease-in-out",
								!user.subscriptionExpirationDate
									? "bg-mti-green-ultralight border-mti-green-light"
									: expirationDateColor(user.subscriptionExpirationDate),
								"border-mti-gray-platinum bg-white",
							)}>
							{!user.subscriptionExpirationDate && "Unlimited"}
							{user.subscriptionExpirationDate && moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
						</Link>
					)}
					<Link href={disableNavigation ? "" : "/profile"} className="-md:hidden flex items-center justify-end gap-6">
						<img src={user.profilePicture} alt={user.name} className="h-10 w-10 rounded-full object-cover" />
						<span className="-md:hidden text-right">
							{user.name} | {USER_TYPE_LABELS[user.type]}
							{user.type === "corporate" &&
								!!user.demographicInformation?.position &&
								` | ${user.demographicInformation?.position || "N/A"}`}
						</span>
					</Link>
					<div className="cursor-pointer md:hidden" onClick={() => setIsMenuOpen(true)}>
						<BsList className="text-mti-purple-light h-8 w-8" />
					</div>
				</div>
				{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
			</header>
		</>
	);
}