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/md/icons/ui-icon.js'
import '../../../src/md/checkbox/ui-checkbox.js'

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

  @reactive()
  protected accessor disabled = false

  @reactive()
  protected accessor iconOnly = false

  @reactive()
  protected accessor withIcon = true

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

  override contentTemplate(): TemplateResult {
    return html`
      <section class="demo-section">
        <h3>Interactive demo</h3>
        <div class="demo-row">
          <div class="nav-rail">
            <ui-navigation-item ?selected="${this.selected}" ?disabled="${this.disabled}" ?iconOnly="${this.iconOnly}">
              ${this.withIcon ? html`<ui-icon slot="icon">inbox</ui-icon>` : ''} ${this.iconOnly ? '' : 'Inbox'}
            </ui-navigation-item>
          </div>
        </div>
        <div class="demo-row">
          <ui-checkbox
            id="selected"
            name="selected"
            @change="${this._toggleBooleanOption}"
            .checked=${this.selected}
          ></ui-checkbox>
          <label for="selected">Selected</label>
          <ui-checkbox
            id="disabled"
            name="disabled"
            @change="${this._toggleBooleanOption}"
            .checked=${this.disabled}
          ></ui-checkbox>
          <label for="disabled">Disabled</label>
          <ui-checkbox
            id="iconOnly"
            name="iconOnly"
            @change="${this._toggleBooleanOption}"
            .checked=${this.iconOnly}
          ></ui-checkbox>
          <label for="iconOnly">Icon only</label>
          <ui-checkbox
            id="withIcon"
            name="withIcon"
            @change="${this._toggleBooleanOption}"
            .checked=${this.withIcon}
          ></ui-checkbox>
          <label for="withIcon">With icon</label>
        </div>
      </section>

      <section class="demo-section">
        <h3>Navigation Rail</h3>
        <div class="demo-row">
          <div class="nav-rail">
            <ui-navigation-item selected>
              <ui-icon slot="icon">inbox</ui-icon>
              Inbox
            </ui-navigation-item>
            <ui-navigation-item>
              <ui-icon slot="icon">star</ui-icon>
              Starred
            </ui-navigation-item>
            <ui-navigation-item>
              <ui-icon slot="icon">send</ui-icon>
              Sent
            </ui-navigation-item>
            <ui-navigation-item disabled>
              <ui-icon slot="icon">drafts</ui-icon>
              Drafts
            </ui-navigation-item>
          </div>
          <div class="nav-rail">
            <ui-navigation-item iconOnly selected>
              <ui-icon slot="icon">inbox</ui-icon>
            </ui-navigation-item>
            <ui-navigation-item iconOnly>
              <ui-icon slot="icon">star</ui-icon>
            </ui-navigation-item>
            <ui-navigation-item iconOnly>
              <ui-icon slot="icon">send</ui-icon>
            </ui-navigation-item>
            <ui-navigation-item iconOnly disabled>
              <ui-icon slot="icon">drafts</ui-icon>
            </ui-navigation-item>
          </div>

          <div class="nav-rail wide">
            <ui-navigation-item selected>
              <ui-icon slot="icon">inbox</ui-icon>
              Inbox
            </ui-navigation-item>
            <ui-navigation-item>
              <ui-icon slot="icon">star</ui-icon>
              Starred
            </ui-navigation-item>
            <ui-navigation-item>
              <ui-icon slot="icon">send</ui-icon>
              Sent
            </ui-navigation-item>
            <ui-navigation-item disabled>
              <ui-icon slot="icon">drafts</ui-icon>
              Drafts
            </ui-navigation-item>
          </div>
        </div>
      </section>
    `
  }
}

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