import { User } from "@/interfaces/user";
import { Dialog, Transition } from "@headlessui/react";
import axios from "axios";
import clsx from "clsx";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import { Fragment } from "react";
import { BsXLg } from "react-icons/bs";

interface Props {
  isOpen: boolean;
  onClose: () => void;
  path: string;
  user: User;
}

export default function MobileMenu({ isOpen, onClose, path, user }: Props) {
  const router = useRouter();

  const logout = async () => {
    axios.post("/api/logout").finally(() => {
      setTimeout(() => router.reload(), 500);
    });
  };

  return (
    <Transition appear show={isOpen} as={Fragment}>
      <Dialog as="div" className="relative z-10" onClose={onClose}>
        <Transition.Child
          as={Fragment}
          enter="ease-out duration-300"
          enterFrom="opacity-0"
          enterTo="opacity-100"
          leave="ease-in duration-200"
          leaveFrom="opacity-100"
          leaveTo="opacity-0"
        >
          <div className="fixed inset-0 bg-black bg-opacity-25" />
        </Transition.Child>

        <div className="fixed inset-0 overflow-y-auto">
          <div className="flex min-h-full items-center justify-center text-center">
            <Transition.Child
              as={Fragment}
              enter="ease-out duration-300"
              enterFrom="opacity-0 scale-95"
              enterTo="opacity-100 scale-100"
              leave="ease-in duration-200"
              leaveFrom="opacity-100 scale-100"
              leaveTo="opacity-0 scale-95"
            >
              <Dialog.Panel className="flex h-screen w-full transform flex-col gap-8 overflow-hidden bg-white text-left align-middle text-black shadow-xl transition-all">
                <Dialog.Title
                  as="header"
                  className="-md:flex w-full items-center justify-between px-8 py-2 shadow-sm md:hidden"
                >
                  <Link href="/">
                    <Image
                      src="/logo_title.png"
                      alt="EnCoach logo"
                      width={69}
                      height={69}
                    />
                  </Link>
                  <div
                    className="cursor-pointer"
                    onClick={onClose}
                    tabIndex={0}
                  >
                    <BsXLg
                      className="text-mti-purple-light text-2xl"
                      onClick={onClose}
                    />
                  </div>
                </Dialog.Title>
                <div className="flex h-full flex-col gap-6 px-8 text-lg">
                  <Link
                    href="/"
                    className={clsx(
                      "w-fit transition duration-300 ease-in-out",
                      path === "/" &&
                        "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
                    )}
                  >
                    Dashboard
                  </Link>
                  {(user.type === "student" ||
                    user.type === "teacher" ||
                    user.type === "developer") && (
                    <>
                      <Link
                        href="/exam"
                        className={clsx(
                          "w-fit transition duration-300 ease-in-out",
                          path === "/exam" &&
                            "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
                        )}
                      >
                        Exams
                      </Link>
                      <Link
                        href="/exercises"
                        className={clsx(
                          "w-fit transition duration-300 ease-in-out",
                          path === "/exercises" &&
                            "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
                        )}
                      >
                        Exercises
                      </Link>
                    </>
                  )}
                  <Link
                    href="/stats"
                    className={clsx(
                      "w-fit transition duration-300 ease-in-out",
                      path === "/stats" &&
                        "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
                    )}
                  >
                    Stats
                  </Link>
                  <Link
                    href="/record"
                    className={clsx(
                      "w-fit transition duration-300 ease-in-out",
                      path === "/record" &&
                        "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
                    )}
                  >
                    Record
                  </Link>
                  {["admin", "developer", "agent", "corporate"].includes(
                    user.type,
                  ) && (
                    <Link
                      href="/payment-record"
                      className={clsx(
                        "w-fit transition duration-300 ease-in-out",
                        path === "/payment-record" &&
                          "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
                      )}
                    >
                      Payment Record
                    </Link>
                  )}
                  {["admin", "developer", "corporate", "teacher"].includes(
                    user.type,
                  ) && (
                    <Link
                      href="/settings"
                      className={clsx(
                        "w-fit transition duration-300 ease-in-out",
                        path === "/settings" &&
                          "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
                      )}
                    >
                      Settings
                    </Link>
                  )}
                  {["admin", "developer", "agent"].includes(user.type) && (
                    <Link
                      href="/tickets"
                      className={clsx(
                        "w-fit transition duration-300 ease-in-out",
                        path === "/tickets" &&
                          "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
                      )}
                    >
                      Tickets
                    </Link>
                  )}
                  <Link
                    href="/profile"
                    className={clsx(
                      "w-fit transition duration-300 ease-in-out",
                      path === "/profile" &&
                        "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
                    )}
                  >
                    Profile
                  </Link>

                  <span
                    className={clsx(
                      "w-fit cursor-pointer justify-self-end transition duration-300 ease-in-out",
                    )}
                    onClick={logout}
                  >
                    Logout
                  </span>
                </div>
              </Dialog.Panel>
            </Transition.Child>
          </div>
        </div>
      </Dialog>
    </Transition>
  );
}