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

import { routes } from '../routes.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 = css`
    :host {
      display: block;
      margin-bottom: 2rem;
    }

    nav {
      display: flex;
      gap: 0.25rem;
      border-bottom: 1px solid var(--app-color-border, #e3e3e8);
      padding-bottom: 0.75rem;
    }

    a {
      padding: 0.35rem 0.75rem;
      border-radius: var(--app-radius, 0.5rem);
      color: var(--app-color-muted, #63636b);
      text-decoration: none;
      font-size: 0.95rem;
    }

    a:hover {
      color: var(--app-color-text, #18181b);
      background: color-mix(in srgb, currentColor 8%, transparent);
    }

    a:focus-visible {
      outline: 2px solid var(--app-color-accent, #3b5bdb);
      outline-offset: 2px;
    }

    /* aria-current is the accessible source of truth, so style from it. */
    a[aria-current='page'] {
      color: var(--app-color-accent, #3b5bdb);
      background: color-mix(in srgb, var(--app-color-accent, #3b5bdb) 12%, transparent);
      font-weight: 600;
    }
  `;

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

  override render() {
    return html`
      <nav aria-label="Main">
        ${routes.map(
          (route) => html`
            <a
              href=${route.path}
              aria-current=${this.path === route.path ? 'page' : 'false'}
              >${route.label}</a
            >
          `,
        )}
      </nav>
    `;
  }
}

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