---
// Heavily inspired from starlight-utils (https://github.com/lorenzolewis/starlight-utils) — adapted so we can disable for blog pages
import type { Props } from "@astrojs/starlight/props";
import StarlightSidebar from "@astrojs/starlight/components/Sidebar.astro";
import BlogSidebar from "starlight-blog/overrides/Sidebar.astro";
import { AstroError } from "astro/errors";
import { Icon } from "@astrojs/starlight/components";

const sidebarConfig: [string, boolean, Props][] = Astro.props.sidebar.map(
  (s) => {
    if (s.type !== "group") {
      throw new AstroError(
        `\`${s.label}\` cannot be used with multiple Starlight sidebars.

  Each top-level \`sidebar\` item in the Starlight config must be either a group or autogenerated.

  See https://starlight.astro.build/guides/sidebar/#groups and https://starlight.astro.build/guides/sidebar/#autogenerated-groups`,
      );
    }

    const isCurrent = (s: (typeof Astro.props.sidebar)[number]) =>
      s.type === "link" ? s.isCurrent : s.entries.some(isCurrent);

    return [s.label, isCurrent(s), { ...Astro.props, sidebar: [...s.entries] }];
  },
);

const isBlog = Astro.url.pathname.split("/")[1] === "blog";
---

{
  isBlog ? (
    <BlogSidebar {...Astro.props}>
      <slot />
    </BlogSidebar>
  ) : (
    <starlight-multi-sidebar-select>
      <label>
        <span class="sr-only">
          {Astro.props.labels["menuButton.accessibleLabel"]}
        </span>
        <select>
          {sidebarConfig.map(([label, isCurrent]) => (
            <option value={label} selected={isCurrent} set:html={label} />
          ))}
        </select>
        <Icon name="down-caret" class="icon" />
      </label>
      {sidebarConfig.map(([label, isCurrent, props]) => (
        <div hidden={!isCurrent} data-starlight-multi-sidebar-label={label}>
          <StarlightSidebar {...props} />
        </div>
      ))}
    </starlight-multi-sidebar-select>
  )
}

<script>
  class StarlightMultiSidebarSelect extends HTMLElement {
    constructor() {
      super();
      const select = this.querySelector("select");
      if (select) {
        select.addEventListener("change", (e) => {
          if (e.currentTarget instanceof HTMLSelectElement) {
            const sidebarEntries = this.querySelectorAll(
              `[data-starlight-multi-sidebar-label]`,
            );
            sidebarEntries.forEach((entry) => {
              if (entry instanceof HTMLDivElement) {
                entry.hidden =
                  entry.dataset["starlightMultiSidebarLabel"] !== select.value;
              }
            });
          }
        });
      }
    }
  }
  customElements.define(
    "starlight-multi-sidebar-select",
    StarlightMultiSidebarSelect,
  );
</script>

<style>
  label {
    --sl-caret-size: 1.25rem;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--sl-color-gray-1);
  }

  label:hover {
    color: var(--sl-color-gray-2);
  }

  label:hover > select {
    border-color: var(--sl-color-gray-5);
  }

  .icon {
    position: absolute;
    top: 0;
    transform: translateY(50%);
    pointer-events: none;
    font-size: var(--sl-caret-size);
    inset-inline-end: 0.5rem;
  }

  select {
    background-color: var(--sl-color-bg-nav);
    box-shadow: var(--sl-shadow-sm);
    border: 1px solid var(--sl-color-hairline-light);
    padding-block: 0.3rem;
    margin-bottom: 0.625rem;
    padding-inline: 0.5rem calc(var(--sl-caret-size) + 0.5rem);
    width: 100%;
    text-overflow: ellipsis;
    color: inherit;
    cursor: pointer;
    appearance: none;
  }
  option {
    background-color: var(--sl-color-bg-nav);
    color: var(--sl-color-gray-1);
  }
</style>
