import HomeIcon from "../icons/HomeIcon";
import LocationIcon from "../icons/LocationIcon";
import InfoIcon from "../icons/InfoIcon";
import MenuLink from "../ui/MenuLink";
import PhoneIcon from "../icons/PhoneIcon";
import Button from "../ui/Button";
import BurgerMenuIcon from "../icons/BurgerMenuIcon";
import clsx from "clsx";
import { useState } from "react";
import { useClickAway } from "@uidotdev/usehooks";
import { AnimatePresence, motion } from "motion/react";
import { useLocation } from "react-router";

function NavMenu() {
  const [isOpen, setIsOpen] = useState(false);

  const ref = useClickAway<HTMLDivElement>(handleClose);

  function handleClose() {
    setIsOpen(false);
  }

  const { pathname } = useLocation();

  return (
    <nav ref={ref}>
      <div className="bg-[#F0EDE6] 2xl:rounded-[1.111vw] rounded-2xl 2xl:p-[0.278vw] p-1 flex 2xl:gap-[0.278vw] gap-1 w-fit fixed left-1/2 -translate-x-1/2 2xl:bottom-[1.111vw] bottom-4 z-10">
        <MenuLink
          to="/"
          className={clsx(
            !pathname.startsWith("/blocks") &&
              pathname !== "/" &&
              "max-md:hidden"
          )}
        >
          <div className="2xl:size-[1.111vw] size-4">
            <HomeIcon />
          </div>
          Masterplan
        </MenuLink>
        <MenuLink
          to="/surroundings"
          className={({ isActive }) => clsx(!isActive && "max-md:hidden")}
        >
          <div className="2xl:size-[1.111vw] size-4">
            <LocationIcon />
          </div>
          Surroundings
        </MenuLink>
        <MenuLink
          to="/about"
          className={({ isActive }) => clsx(!isActive && "max-md:hidden")}
        >
          <div className="2xl:size-[1.111vw] size-4">
            <InfoIcon />
          </div>
          About
        </MenuLink>
        <MenuLink
          to="/contacts"
          className={({ isActive }) => clsx(!isActive && "max-md:hidden")}
        >
          <div className="2xl:size-[1.111vw] size-4">
            <PhoneIcon />
          </div>
          Contacts
        </MenuLink>

        <Button
          variant="primary"
          className="md:hidden"
          onClick={() => setIsOpen(!isOpen)}
        >
          <div className="size-4">
            <BurgerMenuIcon />
          </div>
        </Button>
      </div>
      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="md:hidden p-1 space-y-1 rounded-2xl bg-[#F0EDE6] fixed z-10 left-1/2 -translate-x-1/2 bottom-[75px] w-[177px]"
          >
            <MenuLink
              highlighted={false}
              to="/"
              className="[&>button]:w-full [&>button]:justify-start"
              onClick={handleClose}
            >
              <div className="2xl:size-[1.111vw] size-4">
                <HomeIcon />
              </div>
              Masterplan
            </MenuLink>
            <MenuLink
              highlighted={false}
              to="/surroundings"
              className="[&>button]:w-full [&>button]:justify-start"
              onClick={handleClose}
            >
              <div className="2xl:size-[1.111vw] size-4">
                <LocationIcon />
              </div>
              Surroundings
            </MenuLink>
            <MenuLink
              highlighted={false}
              to="/about"
              className="[&>button]:w-full [&>button]:justify-start"
              onClick={handleClose}
            >
              <div className="2xl:size-[1.111vw] size-4">
                <InfoIcon />
              </div>
              About
            </MenuLink>
            <MenuLink
              highlighted={false}
              to="/contacts"
              className="[&>button]:w-full [&>button]:justify-start"
              onClick={handleClose}
            >
              <div className="2xl:size-[1.111vw] size-4">
                <PhoneIcon />
              </div>
              Contacts
            </MenuLink>
          </motion.div>
        )}
      </AnimatePresence>
    </nav>
  );
}

export default NavMenu;
