import { html, TemplateResult } from 'lit'
import { DemoPage } from '../../../src/demo/DemoPage.js'
import { reactive } from '../../../src/decorators/index.js'

import '../../../src/elements/navigation/ui-navigation-item.js'
import '../../../src/elements/navigation/ui-navigation.js'
import '../../../src/md/icons/ui-icon.js'
import '../../../src/md/checkbox/ui-checkbox.js'

class ComponentDemoPage extends DemoPage {
  @reactive()
  protected accessor selected = false

  constructor() {
    super()
    this.componentName = '<ui-navigation>'
  }

  override contentTemplate(): TemplateResult {
    return html`
      <section class="demo-section">
        <ui-navigation aria-label="Main navigation" current="page">
          <ui-navigation-item selected aria-current="page">
            <span slot="icon" aria-hidden="true">🏠</span>
            Home
          </ui-navigation-item>
          <ui-navigation-item>
            <span slot="icon" aria-hidden="true">🔍</span>
            Search
          </ui-navigation-item>
          <ui-navigation-item>
            <span slot="icon" aria-hidden="true">📁</span>
            Files
          </ui-navigation-item>
          <ui-navigation-item iconOnly disabled aria-disabled="true" tabindex="-1" aria-label="Settings">
            <span slot="icon" aria-hidden="true">⚙️</span>
          </ui-navigation-item>
        </ui-navigation>
      </section>
    `
  }
}

const instance = new ComponentDemoPage()
instance.render()
