"use client";
import React, {useEffect, useState} from "react";
import {Button} from "./ui/button";
import {ChevronRight} from "lucide-react";
import Link from "next/link";
import {SIDE_MENU_TYPE, SIDE_MENUS, STAFF_ROLE_TYPE} from "@/constants";
import FeatureIcon from "./FeatureIcon";
import {useRouter} from "next/navigation";
import {getSideMenusByRole} from "@/lib/utils";
import {useMe} from "@/hooks";

export default function SideMenu() {
  const {data} = useMe();
  const [isOpen, setIsOpen] = useState(false);
  const router = useRouter();
  const [selected, setSelected] = useState<SIDE_MENU_TYPE>();
  useEffect(() => {
    setIsOpen(false);
  }, [router]);
  const visibleMenus = getSideMenusByRole(
    SIDE_MENUS,
    data?.data?.role
      ? (data?.data?.role.toUpperCase() as STAFF_ROLE_TYPE)
      : "COORDINATOR"
  );
  return (
    <>
      <div
        className={`transition-all duration-300  ${
          isOpen ? "w-[300px] pr-[var(--panel-width-padding)]" : "w-0"
        } fixed top-0 right-0 z-40 bg-[#555] rounded-tl-4xl rounded-bl-4xl h-screen overflow-hidden`}
      >
        <div className="flex items-center justify-end">
          <Button
            onClick={() => setIsOpen(false)}
            variant={"ghost"}
            className="text-white"
          >
            <ChevronRight size={"50"} />
          </Button>
        </div>
        <div className="flex flex-col pl-6">
          <div className="flex flex-col items-start gap-y-4 text-white mb-10">
            <FeatureIcon hasLabel={false} iconName={selected?.icon} size={30} />
            <span className="underline underline-offset-8">
              {selected?.label}
            </span>
          </div>
          {selected?.sub &&
            selected.sub.items.length > 0 &&
            isOpen === true &&
            selected?.sub?.items.map((item) => {
              if (item.show || item.show === undefined) {
                return (
                  <div key={item.id} className="flex flex-col gap-y-2 mt-4">
                    <Link href={item.href} className="text-white text-sm">
                      {item.label}
                    </Link>
                    {item.hasLine && (
                      <span className="block h-[1px] w-full bg-white/50"></span>
                    )}
                  </div>
                );
              }
            })}
        </div>
      </div>
      <aside className="px-4 py-6 fixed top-0 right-0 z-50 bg-[#313131] h-screen rounded-tl-4xl rounded-bl-4xl  space-y-3 w-[var(--panel-width)] flex flex-col items-center text-sm overflow-auto">
        {visibleMenus.map((menu) => {
          if (menu.href === "#") {
            return (
              <div
                key={menu.id}
                onClick={() => {
                  setIsOpen(true);
                  setSelected(menu);
                }}
                className="text-white cursor-pointer hover:bg-white/40 p-2 rounded-lg"
              >
                <div className="flex flex-col items-center  gap-y-2">
                  <FeatureIcon
                    hasLabel={true}
                    iconName={menu.icon}
                    size={20}
                    label={menu.label}
                  />
                </div>
              </div>
            );
          } else {
            return (
              <Link
                key={menu.id}
                href={menu.href}
                className="text-white hover:bg-white/40 p-2 rounded-lg"
              >
                <div className="flex flex-col items-center  gap-y-2 ">
                  <FeatureIcon
                    hasLabel={true}
                    iconName={menu.icon}
                    size={20}
                    label={menu.label}
                  />
                </div>
              </Link>
            );
          }
        })}
      </aside>
    </>
  );
}
