import { html, LitElement, PropertyValues } from "lit";
import { customElement, property } from "lit/decorators.js";
const tagName = "docs-navigation"; // For Astro.build
@customElement(tagName)
export class DocsNavigation extends LitElement {
  @property() navigation = [
    { label: "Introduction", href: "#docs/_getting-started/start.md/start" },
    "Getting Started",
    {
      label: "Installation",
      href: "#docs/_getting-started/concorde-outside.md/concorde-outside",
    },
    {
      label: "My first subscriber",
      href: "#docs/_getting-started/my-first-subscriber.md/my-first-subscriber",
    },
    {
      label: "Adding styles",
      href: "#docs/_getting-started/theming.md/theming",
    },
    { label: "Sharing data", href: "#docs/_getting-started/pubsub.md/pubsub" },
    "Core concept",
    {
      label: "Lit + Tailwind + Vite",
      href: "#docs/_core-concept/overview.md/overview",
    },
    {
      label: "The subscriber mixin",
      href: "#docs/_core-concept/subscriber.md/subscriber",
    },
    "Functionnal components",
    { label: "Date", href: "#core/components/functional/date/date.md/date" },
    {
      label: "Fetch",
      href: "#core/components/functional/fetch/fetch.md/fetch",
    },
    { label: "If", href: "#core/components/functional/if/if.md/if" },
    { label: "List", href: "#core/components/functional/list/list.md/list" },
    { label: "Mix", href: "#core/components/functional/mix/mix.md/mix" },
    {
      label: "Queue",
      href: "#core/components/functional/queue/queue.md/queue",
    },
    {
      label: "Router",
      href: "#core/components/functional/router/router.md/router",
    },
    { label: "SDUI", href: "#core/components/functional/sdui/sdui.md/sdui" },
    {
      label: "States",
      href: "#core/components/functional/states/states.md/states",
    },
    {
      label: "Submit",
      href: "#core/components/functional/submit/submit.md/submit",
    },
    {
      label: "Submit",
      href: "#core/components/functional/submit/submit.md/submit",
    },
    //{label: "Subscriber", href: "#core/components/functional/subscriber/subscriber.md/subscriber"},
    {
      label: "Value",
      href: "#core/components/functional/value/value.md/value",
    },
    "UI components",
    { label: "Alert", href: "#core/components/ui/alert/alert.md/alert" },
    { label: "Badge", href: "#core/components/ui/badge/badge.md/badge" },
    { label: "Button", href: "#core/components/ui/button/button.md/button" },
    {
      label: "Captcha",
      href: "#core/components/ui/captcha/captcha.md/captcha",
    },
    { label: "Card", href: "#core/components/ui/card/card.md/card" },
    {
      label: "Checkbox",
      href: "#core/components/ui/form/checkbox/checkbox.md/checkbox",
    },
    {
      label: "Divider",
      href: "#core/components/ui/divider/divider.md/divider",
    },
    {
      label: "Fieldset",
      href: "#core/components/ui/form/fieldset/fieldset.md/fieldset",
    },
    {
      label: "Form actions",
      href: "#core/components/ui/form/form-actions/form-actions.md/form-actions",
    },
    {
      label: "Form layout",
      href: "#core/components/ui/form/form-layout/form-layout.md/form-layout",
    },
    { label: "Group", href: "#core/components/ui/group/group.md/group" },
    { label: "Icon", href: "#core/components/ui/icon/icon.md/icon" },
    { label: "Image", href: "#core/components/ui/image/image.md/image" },
    { label: "Input", href: "#core/components/ui/form/input/input.md/input" },
    {
      label: "Input autocomplete",
      href: "#core/components/ui/form/input-autocomplete/input-autocomplete.md/input-autocomplete",
    },
    { label: "Link", href: "#core/components/ui/link/link.md/link" },
    { label: "Loader", href: "#core/components/ui/loader/loader.md/loader" },
    { label: "Menu", href: "#core/components/ui/menu/menu.md/menu" },
    { label: "Modal", href: "#core/components/ui/modal/modal.md/modal" },
    { label: "Pop", href: "#core/components/ui/pop/pop.md/pop" },
    {
      label: "Progress",
      href: "#core/components/ui/progress/progress.md/progress",
    },
    { label: "Radio", href: "#core/components/ui/form/radio/radio.md/radio" },
    {
      label: "Select",
      href: "#core/components/ui/form/select/select.md/select",
    },
    {
      label: "Switch",
      href: "#core/components/ui/form/switch/switch.md/switch",
    },
    { label: "Table", href: "#core/components/ui/table/table.md/table" },
    {
      label: "Textarea",
      href: "#core/components/ui/form/textarea/textarea.md/textarea",
    },
    { label: "Theme", href: "#" },
    { label: "Toast", href: "#core/components/ui/toast/toast.md/toast" },
    {
      label: "Tooltip",
      href: "#core/components/ui/tooltip/tooltip.md/tooltip",
    },
    "Misc",
    {
      label: "@ancestorAttribute",
      href: "#docs/_misc/ancestor-attribute.md/ancestor-attribute",
    },
    {
      label: "@bind",
      href: "#docs/_misc/bind.md/bind",
    },
    {
      label: "@onAssign",
      href: "#docs/_misc/on-assign.md/on-assign",
    },
    {
      label: "@autoSubscribe",
      href: "#docs/_misc/auto-subscribe.md/auto-subscribe",
    },
    {
      label: "@awaitConnectedAncestors",
      href: "#docs/_misc/wait-for-ancestors.md/wait-for-ancestors",
    },
    {
      label: "Templates Demo",
      href: "#docs/_misc/templates-demo.md/templates-demo",
    },
  ];

  /**
   * Save the scroll position when the component is disconnected
   **/
  static lastScroll = 0;
  disconnectedCallback(): void {
    DocsNavigation.lastScroll = this.scrollTop;
    super.disconnectedCallback();
  }
  /**
   * Scroll to the active item
   */
  firstUpdated(properties: PropertyValues) {
    super.firstUpdated(properties);
    const activeItem = this.shadowRoot?.querySelector(
      'sonic-menu-item[active]:not([href="#"])'
    );
    if (activeItem) {
      window.queueMicrotask(() => {
        this.scrollTop = DocsNavigation.lastScroll;
        (activeItem as any).scrollIntoViewIfNeeded();
      });
    }
  }

  render() {
    return html`
      <sonic-menu>
        ${this.navigation.map((item) => {
          if (typeof item === "string") {
            return html`<sonic-divider class="uppercase" align="left"
              >${item}</sonic-divider
            >`;
          }
          return html`<sonic-menu-item
            pushstate
            type="neutral"
            size="sm"
            href="${item.href}"
            >${item.label}</sonic-menu-item
          >`;
        })}
      </sonic-menu>
    `;
  }
}