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

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

const getNavLinkSuffix = (entry: navLink): string => {
  return "-" + [...paths, entry.path].join("-");
};
const getHrefPath = (entry: navLink): string => {
  return entry.pubpath
    ? entry.pubpath
    : "/" +
        (paths && paths.length ? [...paths, entry.path].join("/") : entry.path);
};

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

<ul
  class={"flex flex-col p-4 bg-black border-caperren-green " +
    (depth ? "space-y-2" : "items-start lg:flex-row lg:space-x-8 lg:mt-0 ")}
>
  {
    items.map(
      (entry) =>
        (entry.enabled ?? true) && (
          <li>
            {Array.isArray(entry.children) && entry.children.length ? (
              <div
                class={
                  pathname.startsWith(getHrefPath(entry))
                    ? "border-caperren-green border-b-2"
                    : ""
                }
              >
                <button
                  id={"dropdownNavbarLink" + getNavLinkSuffix(entry)}
                  data-dropdown-toggle={
                    "dropdownNavbar" + getNavLinkSuffix(entry)
                  }
                  data-dropdown-placement="bottom"
                  class="hover:text-caperren-green-light lg:hover:text-caperren-green-light flex w-full items-center justify-between px-3 py-2 lg:p-0 lg:hover:bg-transparent"
                >
                  {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(entry)}
                  class="border-caperren-green z-10 hidden w-screen border bg-black shadow-sm lg:w-max"
                >
                  <Astro.self
                    items={entry.children}
                    paths={[...paths, entry.path]}
                    depth={depth + 1}
                  />
                </div>
              </div>
            ) : (
              <div
                class={
                  pathname === getHrefPath(entry)
                    ? "border-caperren-green border-b-2"
                    : ""
                }
              >
                <a
                  href={getHrefPath(entry)}
                  target={getHrefPath(entry).startsWith("/") ? "" : "_blank"}
                  class="hover:text-caperren-green-light ring-caperren-green-dark block bg-transparent px-3 py-2 lg:p-0"
                  aria-current={
                    pathname === getHrefPath(entry) ? "page" : undefined
                  }
                >
                  {entry.navText}
                </a>
              </div>
            )}
          </li>
        ),
    )
  }
</ul>