---
import { serviceTags } from "@utils/service";
import { Link } from "@components/Link";
import Dropdown from "@/components/Dropdown.tsx";
import { MenuBars } from "@icons/MenuBars";
import { Close } from "@icons/Close";
const tags = await serviceTags();
// @ts-ignore
const user = Astro.locals.user;
---

<script is:inline>
  const toggle = () => {
    document.querySelector(".close-icon")?.classList.toggle("opacity-0");
    document.querySelector(".bars-icon")?.classList.toggle("opacity-0");
    document.querySelector("#nav-menu")?.classList.toggle("left-0");
    document.querySelector("#nav-menu")?.classList.toggle("-left-[100vw]");
    document.querySelector("#nav-menu")?.classList.toggle("opacity-0");
  };
</script>

<>
  <nav
    class="mx-auto flex max-w-screen-xl items-center justify-between py-2 md:py-3 px-4 lg:px-8 transition-all duration-500 relative leading-6 text-gray-900"
    aria-label="Global"
  >
    <div class="flex z-50">
      <a href="/" class="-m-1.5 p-1.5">
        <span class="sr-only">Sambekiel & Co Rescourses Ltd</span>
        <img
          class="h-9 w-auto"
          src="/img/logo.png"
          alt="Sambekiel & Co Rescourses Ltd"
        />
      </a>
    </div>
    <div class="lg:hidden">
      <button
        type="button"
        onclick="toggle()"
        class="inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
      >
        <span class="sr-only">Toggle main menu</span>
        <div class="flex justify-center items-center">
          <span class="transition-all duration-700 h-7 w-7 z-10 relative">
            <MenuBars className="w-full h-full bars-icon absolute inset-0" />
            <Close
              className="w-full h-full opacity-0 close-icon absolute inset-0"
            />
          </span>
        </div>
      </button>
    </div>

    <div
      id="nav-menu"
      class="flex flex-col lg:flex-row gap-2 text-sm font-semibold lg:gap-x-3 fixed lg:relative top-0 whitespace-nowrap h-screen lg:h-fit w-full lg:w-fit max-w-xs lg:max-w-fit pt-14 lg:pt-0 border-gray-100 border-r-[1px] lg:border-none transition-all duration-700 -left-[100vw] lg:left-0 bg-white lg:bg-transparent opacity-0 lg:opacity-100"
    >
      <a href="/" class="px-2 hover:border-b lg:border-none"> Home</a>

      <!-- desktop -->
      <Dropdown
        className="px-2 hover:border-b lg:border-none hidden lg:block"
        pop={true}
        label="About"
        justify="right"
        client:only="solid-js"
      >
        <div
          class="relative p-1 px-2 lg:hover:bg-blue-900/5 hover:border-b-1 rounded-lg cursor-pointer whitespace-nowrap"
        >
          <Link tag="The Company" href={`/about-us`} />
        </div>
        <div
          class="relative p-1 px-2 lg:hover:bg-blue-900/5 hover:border-b-1 rounded-lg cursor-pointer whitespace-nowrap"
        >
          <Link tag="Our Policies" href={`/policies`} />
        </div>
      </Dropdown>

      <Dropdown
        className="px-2 hover:border-b lg:border-none hidden lg:block"
        pop={true}
        label="Services"
        justify="right"
        client:only="solid-js"
      >
        <div
          class="relative p-1 px-2 lg:hover:bg-blue-900/5 hover:border-b-1 rounded-lg cursor-pointer whitespace-nowrap"
        >
          <Link tag="Services" href={`/services`} />
        </div>
        {
          tags.map((tag) => (
            <div class="relative p-1 px-2 lg:hover:bg-blue-900/5 hover:border-b-1 rounded-lg cursor-pointer whitespace-nowrap">
              <Link tag={tag.tag} href={`/services/${tag.href}`} />
            </div>
          ))
        }
      </Dropdown>

      <!-- mobile -->
      <Dropdown
        className="px-2 hover:border-b lg:border-none block lg:hidden"
        label="About"
        client:only="solid-js"
      >
        <div
          class="relative p-1 px-2 lg:hover:bg-blue-900/5 hover:border-b-1 rounded-lg cursor-pointer whitespace-nowrap"
        >
          <Link tag="The Company" href={`/about-us`} />
        </div>
        <div
          class="relative p-1 px-2 lg:hover:bg-blue-900/5 hover:border-b-1 rounded-lg cursor-pointer whitespace-nowrap"
        >
          <Link tag="Our Policies" href={`/policies`} />
        </div>
      </Dropdown>

      <Dropdown
        className="px-2 hover:border-b lg:border-none block lg:hidden"
        label="Services"
        client:only="solid-js"
      >
        <div
          class="relative p-1 px-2 lg:hover:bg-blue-900/5 hover:border-b-1 rounded-lg cursor-pointer whitespace-nowrap"
        >
          <Link tag="Services" href={`/services`} />
        </div>
        {
          tags.map((tag) => (
            <div class="relative p-1 px-2 lg:hover:bg-blue-900/5 hover:border-b-1 rounded-lg cursor-pointer whitespace-nowrap">
              <Link tag={tag.tag} href={`/services/${tag.href}`} />
            </div>
          ))
        }
      </Dropdown>

      <a href="/gallery" class="px-2 hover:border-b lg:border-none"> Gallery</a>
      <a href="/contact-us" class="px-2 hover:border-b lg:border-none">
        Contact Us
      </a>

      {
      user && 
      <>
      <!-- desktop -->
      <Dropdown
        className="px-2 hover:border-b lg:border-none hidden lg:block"
        pop={true}
        label="Account"
        justify="right"
        client:only="solid-js"
      >
        <div
          class="relative p-1 px-2 lg:hover:bg-blue-900/5 hover:border-b-1 rounded-lg cursor-pointer whitespace-nowrap"
        >
          <Link tag="Dashboard" href={`/dashboard`} />
        </div>
        {
          user.isAdmin && (
            <div class="relative p-1 px-2 lg:hover:bg-blue-900/5 hover:border-b-1 rounded-lg cursor-pointer whitespace-nowrap">
              <Link tag="Staffs" href={`/dashboard/staffs`} />
            </div>
          )
        }
        <div
          class="relative p-1 px-2 lg:hover:bg-blue-900/5 hover:border-b-1 rounded-lg cursor-pointer whitespace-nowrap"
        >
          <Link tag={"Messages" } href={`/dashboard/messages`} />
        </div>
        <div
          class="relative p-1 px-2 lg:hover:bg-blue-900/5 hover:border-b-1 rounded-lg cursor-pointer whitespace-nowrap"
        >
          <Link tag="Logout" href={`/dashboard/logout`} />
        </div>
      </Dropdown>

      <!-- mobile -->
      <Dropdown
        className="px-2 hover:border-b lg:border-none block lg:hidden"
        label="Account"
        client:only="solid-js"
      >
        <div
          class="relative p-1 px-2 lg:hover:bg-blue-900/5 hover:border-b-1 rounded-lg cursor-pointer whitespace-nowrap"
        >
          <Link tag="Dashboard" href={`/dashboard`} />
        </div>
        {
          user.isAdmin && (
            <div class="relative p-1 px-2 lg:hover:bg-blue-900/5 hover:border-b-1 rounded-lg cursor-pointer whitespace-nowrap">
              <Link tag="Staffs" href={`/dashboard/staffs`} />
            </div>
          )
        }
        <div
          class="relative p-1 px-2 lg:hover:bg-blue-900/5 hover:border-b-1 rounded-lg cursor-pointer whitespace-nowrap"
        >
          <Link tag="Messages" href={`/dashboard/messages`} />
        </div>
        <div
          class="relative p-1 px-2 lg:hover:bg-blue-900/5 hover:border-b-1 rounded-lg cursor-pointer whitespace-nowrap"
        >
          <Link tag="Logout" href={`/dashboard/logout`} />
        </div>
      </Dropdown>
      </>
      }
    </div>
  </nav>
</>