import { html, TemplateResult } from 'lit'
import { live } from 'lit/directives/live.js'
import { DemoPage } from '../../../src/demo/DemoPage.js'
import reactive from '../../../src/decorators/reactive.js'
import type { IUser } from '@api-client/core/models/store/User.js'
import { User } from '@api-client/core/mocking/lib/User.js'

import '../../../src/elements/autocomplete/autocomplete-input.js'
import '../../../src/md/text-field/ui-outlined-text-field.js'
import '../../../src/md/listbox/ui-listbox.js'
import '../../../src/md/list/ui-list-item.js'

class ComponentDemoPage extends DemoPage {
  override accessor componentName = 'Autocomplete input'

  @reactive() accessor fixedValue = ''
  @reactive() accessor dynamicValue = ''
  @reactive() accessor dynamicCustomValue = ''
  @reactive() accessor users: IUser[] = []
  @reactive() accessor customUsers: IUser[] = []

  userMock = new User()

  handleFixedAutocomplete(event: CustomEvent<{ item: HTMLElement }>): void {
    const item = event.detail.item
    this.fixedValue = item.getAttribute('data-value') || item.textContent || ''
  }

  handleFixedInput(event: InputEvent): void {
    const target = event.target as HTMLInputElement
    this.fixedValue = target.value
  }

  handleDynamicAutocomplete(event: CustomEvent<{ item: HTMLElement }>): void {
    const item = event.detail.item
    this.dynamicValue = item.dataset.name || ''
  }

  handleDynamicInput(event: InputEvent): void {
    const target = event.target as HTMLInputElement
    this.dynamicValue = target.value
    this.generateMockUsers(target.value, 'users')
  }

  generateMockUsers(startsWith: string, prop: 'users' | 'customUsers'): void {
    const timeout = this.userMock.types.number({ min: 100, max: 1000 })
    const results = this.userMock.types.number({ min: 0, max: 30 })
    setTimeout(() => {
      this[prop] = Array.from({ length: results }, () => {
        const item = this.userMock.user()
        item.name = item.name.startsWith(startsWith) ? item.name : `${startsWith}${item.name}`
        return item
      })
      console.log('Generated users:', this[prop])
    }, timeout)
  }

  handleDynamicCustomInput(event: InputEvent): void {
    const target = event.target as HTMLInputElement
    this.dynamicCustomValue = target.value
    this.generateMockUsers(target.value, 'customUsers')
  }

  handleDynamicCustomAutocomplete(event: CustomEvent<{ item: HTMLElement }>): void {
    const item = event.detail.item
    this.dynamicCustomValue = item.dataset.name || ''
  }

  override contentTemplate(): TemplateResult {
    return html`
      <a href="../">Back</a>

      <section class="demo-section">
        <h2 class="title-large">Fixed suggestions</h2>

        <div class="demo-row">
          <autocomplete-input @autocomplete="${this.handleFixedAutocomplete}">
            <ui-outlined-text-field
              slot="input"
              label="Select a fruit"
              name="fixed"
              .value="${live(this.fixedValue)}"
              @input="${this.handleFixedInput}"
            ></ui-outlined-text-field>
            <ui-listbox slot="suggestions">
              <ui-list-item data-value="apple" role="option">Apple</ui-list-item>
              <ui-list-item data-value="banana" role="option">Banana</ui-list-item>
              <ui-list-item data-value="cherry" role="option">Cherry</ui-list-item>
              <ui-list-item data-value="date" role="option">Date</ui-list-item>
              <ui-list-item data-value="elderberry" role="option">Elderberry</ui-list-item>
              <ui-list-item data-value="fig" role="option">Fig</ui-list-item>
              <ui-list-item data-value="grape" role="option">Grape</ui-list-item>
              <ui-list-item data-value="honeydew" role="option">Honeydew</ui-list-item>
              <ui-list-item data-value="kiwi" role="option">Kiwi</ui-list-item>
              <ui-list-item data-value="lemon" role="option">Lemon</ui-list-item>
              <ui-list-item data-value="mango" role="option">Mango</ui-list-item>
              <ui-list-item data-value="nectarine" role="option">Nectarine</ui-list-item>
              <ui-list-item data-value="orange" role="option">Orange</ui-list-item>
              <ui-list-item data-value="papaya" role="option">Papaya</ui-list-item>
            </ui-listbox>
          </autocomplete-input>
        </div>
      </section>

      <section class="demo-section">
        <h2 class="title-large">Dynamic suggestions</h2>

        <div class="demo-row">
          <autocomplete-input @autocomplete="${this.handleDynamicAutocomplete}">
            <ui-outlined-text-field
              slot="input"
              label="Choose a user"
              name="dynamic"
              .value="${live(this.dynamicValue)}"
              @input="${this.handleDynamicInput}"
            ></ui-outlined-text-field>
            <ui-listbox slot="suggestions"
              >${this.users.map(
                (user) =>
                  html`<ui-list-item
                    data-name="${user.name}"
                    data-email="${user.email[0].email}"
                    data-index="name email"
                    role="option"
                    >${user.name}<span slot="supporting-text">${user.email[0].email}</span></ui-list-item
                  >`
              )}</ui-listbox
            >
          </autocomplete-input>
        </div>
      </section>

      <section class="demo-section">
        <h2 class="title-large">Custom Input</h2>

        <div class="demo-row">
          <autocomplete-input @autocomplete="${this.handleDynamicCustomAutocomplete}">
            <div class="share-input" slot="anchor">
              <div class="input-container">
                <input
                  type="text"
                  slot="input"
                  autocomplete="off"
                  placeholder="Enter name or email"
                  name="dynamic-custom"
                  class="native-input"
                  .value="${live(this.dynamicCustomValue)}"
                  @input="${this.handleDynamicCustomInput}"
                />
              </div>
            </div>
            <ui-listbox slot="suggestions"
              >${this.customUsers.map(
                (user) =>
                  html`<ui-list-item
                    data-name="${user.name}"
                    data-email="${user.email[0].email}"
                    data-index="name email"
                    role="option"
                    >${user.name}<span slot="supporting-text">${user.email[0].email}</span></ui-list-item
                  >`
              )}</ui-listbox
            >
          </autocomplete-input>
        </div>
      </section>
    `
  }
}
const instance = new ComponentDemoPage()
instance.render()
