---
import type { navLink } from "@interfaces/site-layout.ts";

import { getHrefPath, getNavLinkSuffix } from "@data/site-layout.ts";

const items: navLink[] = Astro.props.items;
const depth: number = Astro.props.depth ?? 0;
const paths: string[] = Astro.props.paths ?? [];

const { pathname } = Astro.url;
---

<ul
  class:list={[
    "border-caperren-green flex flex-col space-y-4 bg-black",
    depth
      ? "space-y-4 py-4"
      : "items-start lg:mt-0 lg:flex-row lg:space-y-0 lg:space-x-8",
  ]}
>
  {
    items.map(
      (entry) =>
        (entry.enabled ?? true) &&
        !(entry.hidden ?? false) && (
          <li class="">
            {Array.isArray(entry.children) && entry.children.length ? (
              <div>
                <button
                  id={"dropdownNavbarLink" + getNavLinkSuffix(paths, entry)}
                  data-dropdown-toggle={
                    "dropdownNavbar" + getNavLinkSuffix(paths, entry)
                  }
                  data-dropdown-placement="bottom-start"
                  data-dropdown-offset-distance="5"
                  data-dropdown-offset-skidding="12"
                  class:list={[
                    "hover:text-caperren-green-light lg:hover:text-caperren-green-light flex w-full items-center justify-between lg:p-0 lg:hover:bg-transparent",
                    pathname.startsWith(getHrefPath(paths, entry)) &&
                    !(entry.placeholderEntry ?? false)
                      ? "border-caperren-green border-b-2"
                      : false,
                  ]}
                >
                  {entry.navText}
                  <svg
                    class="ms-2.5 h-2.5 w-2.5"
                    aria-hidden="true"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 10 6"
                  >
                    <path
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="m1 1 4 4 4-4"
                    />
                  </svg>
                </button>
                <div
                  id={"dropdownNavbar" + getNavLinkSuffix(paths, entry)}
                  class="border-caperren-green z-10 hidden w-max max-w-screen border bg-black px-6 shadow-sm"
                >
                  <Astro.self
                    items={entry.children}
                    paths={[...paths, entry.path]}
                    depth={depth + 1}
                  />
                </div>
              </div>
            ) : (
              <div>
                <a
                  href={
                    !(entry.placeholderEntry ?? false)
                      ? getHrefPath(paths, entry)
                      : undefined
                  }
                  target={
                    getHrefPath(paths, entry).startsWith("/") ? "" : "_blank"
                  }
                  class:list={[
                    "ring-caperren-green-dark block bg-transparent lg:p-0",
                    pathname === getHrefPath(paths, entry)
                      ? "border-caperren-green border-b-2"
                      : false,
                    entry.isSubItem ? "ms-3" : false,
                    entry.placeholderEntry
                      ? false
                      : "hover:text-caperren-green-light",
                  ]}
                  aria-current={
                    pathname === getHrefPath(paths, entry) &&
                    !(entry.placeholderEntry ?? false)
                      ? "page"
                      : undefined
                  }
                >
                  {entry.isSubItem && "∟ "}
                  {entry.navText}
                </a>
              </div>
            )}
          </li>
        ),
    )
  }
</ul>