---
import "../styles/global.css";

type NavLink = {
  label: string;
  href: string;
  description?: string;
  external?: boolean;
  group?: string;
};

type NavItem =
  | NavLink
  | {
      label: string;
      items: NavLink[];
    };

type Props = {
  title?: string;
  description?: string;
  theme?: string;
  brandHref?: string;
  brandTitle?: string;
  brandSubtitle?: string;
  navItems?: NavItem[];
};

const {
  title = "Events",
  description = "Events organized by Neeldhara Misra.",
  theme = "default",
  brandHref = "/",
  brandTitle = "Events",
  brandSubtitle = "organized events and local guides",
  navItems: suppliedNavItems,
} = Astro.props;

const pageTitle = title === "Events" ? "Events" : `${title} - Events`;
const defaultNavItems: NavItem[] = [
  { label: "Organized", href: "/" },
  { label: "Attended", href: "/attended/" },
];
const navItems = suppliedNavItems ?? defaultNavItems;
const navVariant = suppliedNavItems ? "standard" : "toggle";
const pathname = Astro.url.pathname;
const rybbitScriptSrc = "https://analytics.neeldhara.cloud/api/script.js";
const rybbitSiteId = "12";
const isMenu = (item: NavItem): item is Extract<NavItem, { items: NavLink[] }> => "items" in item;
const isCurrent = (href: string) => pathname === href;
const getMenuGroups = (items: NavLink[]) => {
  const groups: { label?: string; items: NavLink[] }[] = [];

  items.forEach((child) => {
    const groupLabel = child.group;
    let group = groups.find((candidate) => candidate.label === groupLabel);

    if (!group) {
      group = { label: groupLabel, items: [] };
      groups.push(group);
    }

    group.items.push(child);
  });

  return groups;
};
const getMenuLayout = (item: Extract<NavItem, { items: NavLink[] }>) => {
  const itemCount = item.items.length;
  const hasDescriptions = item.items.some((child) => child.description);
  const groups = getMenuGroups(item.items);
  const hasGroups = groups.some((group) => group.label);
  const columns = hasGroups ? Math.min(groups.length, 3) : itemCount >= 16 ? 3 : itemCount >= 7 ? 2 : 1;
  const width = itemCount >= 16 ? "58rem" : columns === 2 ? "38rem" : hasDescriptions ? "26rem" : "18rem";
  const density = itemCount >= 10 ? "compact" : hasDescriptions ? "descriptive" : "simple";

  return {
    columns,
    width,
    density,
    groups,
    hasGroups,
  };
};
---

<!doctype html>
<html lang="en" data-theme={theme}>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content={description} />
    <title>{pageTitle}</title>
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    {import.meta.env.PROD && <script is:inline src={rybbitScriptSrc} data-site-id={rybbitSiteId} defer></script>}
  </head>
  <body>
    <a class="skip-link" href="#content">Skip to content</a>
    <header class="site-header">
      <div class="site-header__inner">
        <a class="brand" href={brandHref} aria-label={`${brandTitle} home`}>
          <span class="brand__mark" aria-hidden="true">E</span>
          <span>
            <strong>{brandTitle}</strong>
            {brandSubtitle && <small>{brandSubtitle}</small>}
          </span>
        </a>
        <nav class:list={["site-nav", navVariant === "toggle" && "site-nav--toggle"]} aria-label="Main navigation">
          {
            navItems.map((item) =>
              isMenu(item) ? (() => {
                const menuLayout = getMenuLayout(item);
                return (
                  <details
                    class="nav-menu"
                    data-active={item.items.some((child) => isCurrent(child.href)) ? "true" : undefined}
                    data-density={menuLayout.density}
                    style={`--nav-menu-columns: ${menuLayout.columns}; --nav-menu-width: ${menuLayout.width};`}
                  >
                    <summary>{item.label}</summary>
                    <div class="nav-menu__panel" data-grouped={menuLayout.hasGroups ? "true" : undefined}>
                      {menuLayout.hasGroups ? (
                        menuLayout.groups.map((group) => (
                          <div class="nav-menu__group">
                            {group.label && <p class="nav-menu__group-label">{group.label}</p>}
                            {group.items.map((child) => (
                              <a
                                href={child.href}
                                target={child.external ? "_blank" : undefined}
                                rel={child.external ? "noreferrer" : undefined}
                                aria-current={isCurrent(child.href) ? "page" : undefined}
                                aria-label={child.external ? `${child.label} (external website)` : undefined}
                              >
                                <span>
                                  {child.label}
                                  {child.external && <span class="external-mark" aria-hidden="true">↗</span>}
                                </span>
                                {child.description && <small>{child.description}</small>}
                              </a>
                            ))}
                          </div>
                        ))
                      ) : (
                        item.items.map((child) => (
                          <a
                            href={child.href}
                            target={child.external ? "_blank" : undefined}
                            rel={child.external ? "noreferrer" : undefined}
                            aria-current={isCurrent(child.href) ? "page" : undefined}
                            aria-label={child.external ? `${child.label} (external website)` : undefined}
                          >
                            <span>
                              {child.label}
                              {child.external && <span class="external-mark" aria-hidden="true">↗</span>}
                            </span>
                            {child.description && <small>{child.description}</small>}
                          </a>
                        ))
                      )}
                    </div>
                  </details>
                );
              })() : (
                <a
                  href={item.href}
                  target={item.external ? "_blank" : undefined}
                  rel={item.external ? "noreferrer" : undefined}
                  aria-current={isCurrent(item.href) ? "page" : undefined}
                  aria-label={item.external ? `${item.label} (external website)` : undefined}
                >
                  {item.label}
                  {item.external && <span class="external-mark" aria-hidden="true">↗</span>}
                </a>
              )
            )
          }
        </nav>
      </div>
    </header>
    <main id="content">
      <slot />
    </main>
    <footer class="site-footer">
      <a class="site-footer__home" href="/">
        <strong>Events</strong>
        <p>Go back to all events</p>
      </a>
      <div class="site-footer__links">
        <a href="https://www.neeldhara.com">Neeldhara Misra</a>
        <a href="https://github.com/neeldhara">GitHub</a>
      </div>
    </footer>
  </body>
</html>
