---
const pathName = new URL(Astro.request.url).pathname;

interface Props {
  navbarDisplay: "normal" | "transparent";
}

import person from "@data/person";
import links from "@assets/menu-primary";
import ThemeSwitcher from "@components/ThemeSwitcher.astro";

const { navbarDisplay = "normal" } = Astro.props as Props;
---

<nav
  class="font-header group/nav fixed top-0 right-0 left-0 z-100 uppercase"
  aria-label="Primary"
  transition:name="nav"
  transition:animate="none"
  id="nav"
  data-mobile-menu="hidden"
  data-transparency={navbarDisplay}
>
  <div
    id="navbar-lg"
    class:list={[
      "mx-auto border-0 border-b-1 border-solid border-b-white bg-white px-4 shadow-lg transition group-data-[mobile-menu=hidden]/nav:group-data-[transparency=transparent]/nav:border-b-gray-500 group-data-[mobile-menu=hidden]/nav:group-data-[transparency=transparent]/nav:bg-transparent dark:border-b-gray-700 dark:bg-gray-700",
      "text-gray-500 dark:text-white",
      "group-data-[mobile-menu=hidden]/nav:group-data-[transparency=transparent]/nav:!text-gray-500"
    ]}
  >
    <div class="flex h-12 items-center justify-between">
      <!-- Logo -->
      <div
        class="font-header text-primary flex-shrink-0 text-2xl font-bold uppercase"
      >
        <a href="/" aria-label="Go home"
          >{person.names.first} {person.names.last}</a
        >
      </div>

      <!-- Desktop Menu -->
      <div class="hidden space-x-6 font-medium md:flex">
        <div class="text-primary">
          <ThemeSwitcher />
        </div>
        {
          links.map((link) => (
            <a
              href={link.href}
              class:list={[
                "font-header font-medium uppercase transition hover:text-gray-300",
                pathName === link.href ? "text-primary" : ""
              ]}
              aria-current={pathName === link.href ? "page" : undefined}
            >
              {link.label}
            </a>
          ))
        }
      </div>

      <!-- Mobile Menu Button -->
      <div class="md:hidden">
        <button id="menu-toggle" class="text-2xl focus:outline-none">
          ☰
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile Menu -->
  <div
    id="mobile-menu"
    class:list={[
      "hidden space-y-2 bg-white px-4 pt-4 pb-4 font-medium shadow-lg transition group-data-[mobile-menu=visible]/nav:block md:hidden group-data-[mobile-menu=visible]/nav:md:hidden dark:bg-gray-600 starting:opacity-0",
      "text-gray-500 dark:text-white",
      "group-data-[mobile-menu=hidden]/nav:group-data-[transparency=transparent]/nav:!text-gray-500"
    ]}
  >
    {
      links.map((link) => (
        <a
          href={link.href}
          class:list={[
            "block transition hover:text-gray-300",
            pathName === link.href ? "text-primary" : ""
          ]}
          aria-current={pathName === link.href ? "page" : undefined}
        >
          {link.label}
        </a>
      ))
    }
    <div class="text-primary">
      <ThemeSwitcher />
    </div>
  </div>
</nav>

<!-- Extra spacing for non-transparent navbar  -->
<div
  class:list={[
    "y-0 r-0 h-12",
    navbarDisplay === "transparent" ? "hidden" : "block"
  ]}
>
</div>

<script define:vars={{ navbarDisplay }} data-astro-rerun>
  window.navbarDisplay = navbarDisplay || "normal";
</script>

<script>
  let nav: HTMLElement | null;
  let toggle: HTMLElement | null;

  const checkScroll = () => {
    if (!nav) {
      nav = document.getElementById("nav");
    }

    if (!nav) {
      return;
    }

    nav.setAttribute(
      "data-transparency",
      window.scrollY === 0 && window.navbarDisplay === "transparent"
        ? "transparent"
        : "normal"
    );
  };

  document.addEventListener("astro:page-load", () => {
    nav = document.getElementById("nav");
    toggle = document.getElementById("menu-toggle");

    if (toggle) {
      toggle.addEventListener("click", () => {
        if (nav) {
          const visible = nav.getAttribute("data-mobile-menu") === "visible";
          nav.setAttribute("data-mobile-menu", visible ? "hidden" : "visible");
        }

        checkScroll();
      });
    }

    checkScroll();
  });

  window.addEventListener("scroll", checkScroll);
</script>
