import { useState } from "react";
import BurgerIcon from "./icons/BurgerIcon";
import { Transition } from "react-transition-group";
import BellIcon from "./icons/BellIcon";
import ParamsIcon from "./icons/ParamsIcon";
import WorkIcon from "./icons/WorkIcon";
import ExitIcon from "./icons/ExitIcon";
import useAuthStore from "../stores/useAuthStore";
import { useClickAway } from "@uidotdev/usehooks";
import useModalStore from "../stores/useModalStore";
import SettingsModal from "./modals/SettingsModal";
import CompanyModal from "./modals/CompanyModal";

function Menu() {
  const [isShow, setIsShow] = useState<boolean>(false);
  const { user, setUser } = useAuthStore();
  const ref = useClickAway<HTMLDivElement>(() => {
    setIsShow(false);
  });

  const { setModal } = useModalStore();

  function logout() {
    setUser(null);
  }

  function handleClickSettings() {
    setIsShow(false);
    setModal(<SettingsModal />);
  }

  function handleClickCompany() {
    setIsShow(false);
    setModal(<CompanyModal />);
  }

  return (
    <div>
      <span className="relative z-20 cursor-pointer">
        <button
          onClick={() => setIsShow(true)}
          className={`p-3 transition-colors relative z-20 ${
            isShow
              ? "bg-[#49A1F5] text-white pointer-events-none"
              : "hover:bg-neutral-200"
          }`}
        >
          <BurgerIcon />
        </button>
      </span>

      <Transition in={isShow} timeout={150} mountOnEnter unmountOnExit>
        {(state) => (
          <div className={`${state}`}>
            <div className="absolute top-0 left-0 z-20 w-full h-full bg-black bg-opacity-10"></div>
            <div ref={ref} className="absolute z-20 ml-2 mt-3.5">
              <div className="relative">
                <svg
                  width="12"
                  height="10"
                  viewBox="0 0 12 10"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  className="absolute -top-2.5 left-2.5 drop-shadow"
                >
                  <path
                    d="M5.14251 1.42916C5.53091 0.781817 6.46909 0.781816 6.85749 1.42915L12 10H0L5.14251 1.42916Z"
                    fill="white"
                  />
                </svg>
                <div className="relative w-[240px] bg-white rounded-lg shadow">
                  <div className="border-b border-[#DAE0E5] p-6 flex flex-col items-center justify-center gap-4">
                    <div className="rounded-full bg-[#E6ECF2] w-[88px] h-[88px] flex justify-center items-center">
                      <p className="text-2xl font-semibold ml-0.5 mt-0.5">
                        {user?.name.split(" ")[0][0]}
                        {user?.name.split(" ")[1][0]}
                      </p>
                    </div>
                    <div className="space-y-1 text-center">
                      <p className="text-sm">{user?.name}</p>
                      <p className="text-[#77828C] text-xs">{user?.username}</p>
                    </div>
                  </div>
                  <div className="border-b border-[#DAE0E5] py-3 space-y-2">
                    <button
                      disabled
                      className="text-sm flex items-center gap-2 px-4 w-full hover:bg-[#E6ECF2] transition-colors disabled:hover:bg-inherit disabled:opacity-50"
                    >
                      <span className="text-[#77828C] py-1">
                        <BellIcon />
                      </span>
                      Уведомления
                    </button>
                    <button
                      className="text-sm flex items-center gap-2 px-4 w-full hover:bg-[#E6ECF2] transition-colors disabled:hover:bg-inherit disabled:opacity-50"
                      onClick={handleClickSettings}
                    >
                      <span className="text-[#77828C] py-1">
                        <ParamsIcon />
                      </span>
                      Настройки
                    </button>
                  </div>
                  <div className="border-b border-[#DAE0E5] py-2">
                    <button
                      className="text-sm flex items-center gap-2 px-4 w-full hover:bg-[#E6ECF2] transition-colors disabled:hover:bg-inherit disabled:opacity-50"
                      onClick={handleClickCompany}
                    >
                      <span className="text-[#77828C] py-1">
                        <WorkIcon />
                      </span>
                      Компания
                    </button>
                  </div>
                  <div className="py-2">
                    <button
                      onClick={logout}
                      className="text-sm flex items-center gap-2 px-4 w-full hover:bg-[#E6ECF2] transition-colors disabled:hover:bg-inherit disabled:opacity-50"
                    >
                      <span className="text-[#77828C] py-1">
                        <ExitIcon />
                      </span>
                      Выход
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}
      </Transition>
    </div>
  );
}

export default Menu;