import { LitElement, html, css, unsafeCSS } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import styles from './nav-bar.css?inline';

@customElement('nav-bar')
export class NavBar extends LitElement {
    static styles = css`${unsafeCSS(styles)}`;

    @state() theme: 'light' | 'dark' =
        (localStorage.getItem('theme') as 'light' | 'dark') ||
        (window.matchMedia('(prefers-color-scheme: dark)').matches
            ? 'dark'
            : 'light');

    firstUpdated() {
        document.documentElement.setAttribute('data-theme', this.theme);
    }

    toggleTheme() {
        this.theme = this.theme === 'light' ? 'dark' : 'light';
        document.documentElement.setAttribute('data-theme', this.theme);
        localStorage.setItem('theme', this.theme);
    }

    navigate(path: string) {
        this.dispatchEvent(
            new CustomEvent('nav', { detail: { path }, bubbles: true, composed: true })
        );
    }

    render() {
        return html`
      <nav>
        <div class="brand"><img src="/logo.svg" alt="Flight Score Logo" /> FlightScore</div>
        <div class="links">
          <a href="/" @click=${(e: Event) => (e.preventDefault(), this.navigate('/'))}>
            Home
          </a>
          <a
            href="/competitions"
            @click=${(e: Event) => (e.preventDefault(), this.navigate('/competitions'))}
          >
            Competitions
          </a>
          <button @click=${this.toggleTheme}>
            ${this.theme === 'light' ? '🌙 Dark' : '☀️ Light'}
          </button>
        </div>
      </nav>
    `;
    }
}