import { html, TemplateResult } from 'lit'
import { DemoPage } from '../../../src/demo/DemoPage.js'
import { reactive } from '../../../src/decorators/index.js'
import '../../../src/md/select/ui-select.js'
import '../../../src/md/select/ui-option.js'
import '../../../src/md/button/ui-button.js'
import '../../../src/md/icons/ui-icon.js'

class ComponentDemoPage extends DemoPage {
  override accessor componentName = 'UI Select'

  @reactive() accessor basicSelected: string | undefined

  @reactive() accessor iconSelected: string | undefined

  @reactive() accessor supportingSelected: string | undefined

  @reactive() accessor noIconSelected: string | undefined

  @reactive() accessor programmaticSelected: string | undefined

  contentTemplate(): TemplateResult {
    return html`
      <a href="../">Back</a>
      <h1>UI Select</h1>
      <p>A Material Design 3 select component that behaves like an outlined text field with dropdown.</p>

      <section>
        <h2>Basic Select</h2>
        <p>Select a fruit from the list:</p>
        <ui-select id="basic-select" @change="${this.handleBasicSelectChange}" label="Select a fruit">
          <ui-option value="apple">Apple</ui-option>
          <ui-option value="banana">Banana</ui-option>
          <ui-option value="cherry">Cherry</ui-option>
          <ui-option value="date">Date</ui-option>
          <ui-option value="elderberry">Elderberry</ui-option>
        </ui-select>
        <p>Selected: <span id="basic-result">None</span></p>
      </section>

      <section>
        <h2>Select with Icons</h2>
        <p>Select a country with icons:</p>
        <ui-select id="icon-select" @change="${this.handleIconSelectChange}" value="us" label="Select a country">
          <ui-option value="us">
            <ui-icon slot="start">🇺🇸</ui-icon>
            United States
          </ui-option>
          <ui-option value="gb">
            <ui-icon slot="start">🇬🇧</ui-icon>
            United Kingdom
          </ui-option>
          <ui-option value="de">
            <ui-icon slot="start">🇩🇪</ui-icon>
            Germany
          </ui-option>
          <ui-option value="fr">
            <ui-icon slot="start">🇫🇷</ui-icon>
            France
          </ui-option>
          <ui-option value="jp">
            <ui-icon slot="start">🇯🇵</ui-icon>
            Japan
          </ui-option>
        </ui-select>
        <p>Selected: <span id="icon-result">None</span></p>
      </section>

      <section>
        <h2>Select with Supporting Text</h2>
        <p>Select a user with additional information:</p>
        <ui-select id="supporting-select" @change="${this.handleSupportingSelectChange}">
          <ui-option value="alice" lines="two">
            Alice Johnson
            <span slot="supporting-text">alice@example.com</span>
          </ui-option>
          <ui-option value="bob" lines="two">
            Bob Smith
            <span slot="supporting-text">bob@example.com</span>
          </ui-option>
          <ui-option value="carol" lines="two">
            Carol Davis
            <span slot="supporting-text">carol@example.com</span>
          </ui-option>
          <ui-option value="dave" lines="two">
            Dave Wilson
            <span slot="supporting-text">dave@example.com</span>
          </ui-option>
        </ui-select>
        <p>Selected: <span id="supporting-result">None</span></p>
      </section>

      <section>
        <h2>Disabled Select</h2>
        <p>This select is disabled:</p>
        <ui-select id="disabled-select" disabled>
          <ui-option value="option1">Option 1</ui-option>
          <ui-option value="option2">Option 2</ui-option>
          <ui-option value="option3">Option 3</ui-option>
        </ui-select>
      </section>

      <section>
        <h2>Select without Selection Icon</h2>
        <p>Select without the check icon:</p>
        <ui-select id="no-icon-select" @change="${this.handleNoIconSelectChange}">
          <ui-option value="red">Red</ui-option>
          <ui-option value="green">Green</ui-option>
          <ui-option value="blue">Blue</ui-option>
          <ui-option value="yellow">Yellow</ui-option>
        </ui-select>
        <p>Selected: <span id="no-icon-result">None</span></p>
      </section>

      <section>
        <h2>Programmatic Control</h2>
        <p>Control the select value programmatically:</p>
        <ui-select id="programmatic-select" @change="${this.handleProgrammaticSelectChange}">
          <ui-option value="one">One</ui-option>
          <ui-option value="two">Two</ui-option>
          <ui-option value="three">Three</ui-option>
          <ui-option value="four">Four</ui-option>
        </ui-select>
        <p>Selected: <span id="programmatic-result">None</span></p>
        <div class="button-group">
          <ui-button @click="${this.setValueOne}">Set to "One"</ui-button>
          <ui-button @click="${this.setValueTwo}">Set to "Two"</ui-button>
          <ui-button @click="${this.clearValue}">Clear</ui-button>
        </div>
      </section>
    `
  }

  handleBasicSelectChange(e: CustomEvent): void {
    const { value } = e.detail
    this.basicSelected = value
    const resultElement = document.querySelector('#basic-result')
    if (resultElement) {
      resultElement.textContent = value || 'None'
    }
  }

  handleIconSelectChange(e: CustomEvent): void {
    const { value } = e.detail
    this.iconSelected = value
    const resultElement = document.querySelector('#icon-result')
    if (resultElement) {
      resultElement.textContent = value || 'None'
    }
  }

  handleSupportingSelectChange(e: CustomEvent): void {
    const { value } = e.detail
    this.supportingSelected = value
    const resultElement = document.querySelector('#supporting-result')
    if (resultElement) {
      resultElement.textContent = value || 'None'
    }
  }

  handleNoIconSelectChange(e: CustomEvent): void {
    const { value } = e.detail
    this.noIconSelected = value
    const resultElement = document.querySelector('#no-icon-result')
    if (resultElement) {
      resultElement.textContent = value || 'None'
    }
  }

  handleProgrammaticSelectChange(e: CustomEvent): void {
    const { value } = e.detail
    this.programmaticSelected = value
    const resultElement = document.querySelector('#programmatic-result')
    if (resultElement) {
      resultElement.textContent = value || 'None'
    }
  }

  setValueOne(): void {
    const select = document.querySelector('#programmatic-select') as HTMLElement & { value: string }
    if (select) {
      select.value = 'one'
    }
  }

  setValueTwo(): void {
    const select = document.querySelector('#programmatic-select') as HTMLElement & { value: string }
    if (select) {
      select.value = 'two'
    }
  }

  clearValue(): void {
    const select = document.querySelector('#programmatic-select') as HTMLElement & { value: string }
    if (select) {
      select.value = ''
    }
  }
}

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