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 >= user.desiredLevels.reading,
      },

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

  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.type === "corporate"
                ? `${user.corporateInformation?.companyInformation.name} |`
                : ""}{" "}
              {user.name} | {USER_TYPE_LABELS[user.type]}
            </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>
    </>
  );
}