import { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';

import { routes } from '../routes.js';
import { tailwind } from '../styles/tailwind.js';

/**
 * Site navigation.
 *
 * The active path arrives as a property rather than being read from
 * `window.location`, so this element renders identically on the server and in
 * the browser.
 */
@customElement('app-nav')
export class AppNav extends LitElement {
  static override styles = [
    tailwind,
    css`
      :host {
        display: block;
      }

      a {
        /*
         * Tailwind's preflight strips the default underline, but preflight is
         * document-level and is not adopted into shadow roots, so links reset
         * themselves here instead.
         */
        text-decoration: none;
        color: inherit;
      }
    `,
  ];

  @property({ type: String })
  path = '/';

  override render() {
    return html`
      <nav
        aria-label="Main"
        class="mb-8 flex gap-1 border-b border-zinc-200 pb-3 dark:border-zinc-800"
      >
        ${routes.map(
          (route) => html`
            <a
              href=${route.path}
              aria-current=${this.path === route.path ? 'page' : 'false'}
              class="rounded-lg px-3 py-1.5 text-sm text-zinc-500 hover:bg-zinc-500/10
              hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-2
              focus-visible:outline-indigo-500 aria-[current=page]:bg-indigo-500/10
              aria-[current=page]:font-semibold aria-[current=page]:text-indigo-600
              dark:text-zinc-400 dark:hover:text-zinc-100
              dark:aria-[current=page]:text-indigo-400"
              >${route.label}</a
            >
          `,
        )}
      </nav>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'app-nav': AppNav;
  }
}