import { html, TemplateResult } from 'lit'
import { ProjectMock } from '@api-client/core/mocking/ProjectMock.js'
import { DemoPage } from '../../../src/demo/DemoPage.js'
import { reactive } from '../../../src/decorators/index.js'
// import { WebHttpClientStoreBindings } from '../../../src/bindings/web/WebHttpClientStoreBindings.js'
import UrlInput from '../../../src/elements/http/UrlInput.js'
import { EventTypes } from '../../../src/events/EventTypes.js'
import '../../../src/define/http/http-url-input.js'
import '../../../src/define/http/http-url-params-form.js'
import '../../../src/md/button/ui-button.js'
import UrlParamsForm from '../../../src/elements/http/UrlParamsForm.js'

// const workerUri = new URL('/src/http-client/store/IdbThread.ts', import.meta.url).toString()

class ComponentDemoPage extends DemoPage {
  override accessor componentName = 'URL Editing'

  mock = new ProjectMock()

  @reactive() accessor initialized = false

  @reactive() accessor value = '/?q=my query&type=folder'

  // store = new WebHttpClientStoreBindings({ code: 'demo', name: 'Demo', version: '0' }, workerUri)

  constructor() {
    super()
    this.init()
    window.addEventListener(EventTypes.Http.Request.State.urlChange, this.handleGlobalUrlChange)
  }

  async init(): Promise<void> {
    // await this.store.initialize()
    this.initialized = true
  }

  protected handleGenerateHistory(): void {
    this.generateHistory()
  }

  protected handleClearHistory(): void {
    this.clearHistory()
  }

  async generateHistory(): Promise<void> {
    // const values = this.mock.url.urls(100)
    // await Promise.all(values.map((i) => this.store.urlHistoryAdd(i.key)))
  }

  async clearHistory(): Promise<void> {
    // await this.store.urlHistoryClear()
  }

  handleRequestSend(e: Event): void {
    const input = e.target as UrlInput
    console.log('Request send', input.value)
  }

  handleChange(e: Event): void {
    const input = e.target as UrlInput
    console.log('Change from URL input', input.value)
    this.value = input.value
  }

  handleGlobalUrlChange(e: Event): void {
    const input = e.target as UrlInput
    console.log('Global URL change', input.value)
  }

  handleParamsChange(e: Event): void {
    const input = e.target as UrlParamsForm
    console.log('Change from params editor', input.value)
    this.value = input.value
  }

  contentTemplate(): TemplateResult {
    if (!this.initialized) {
      return html`
        <a href="./">Back</a>
        <div class="screen-loader">
          <p>Loading demo page</p>
          <progress></progress>
        </div>
      `
    }
    return html`
      <a href="./">Back</a>
      <section class="demo-section">
        <h2 class="title-large">Data configuration</h2>
        <div class="demo-row">
          <ui-button color="outlined" @click="${this.handleGenerateHistory}">Generate URL history</ui-button>
          <ui-button color="outlined" @click="${this.handleClearHistory}">Clear URL history</ui-button>
        </div>
      </section>
      <section class="demo-section">
        <h2 class="title-large">HTTP URL input</h2>
        <http-url-input
          .value="${this.value || ''}"
          @requestsend="${this.handleRequestSend}"
          @change="${this.handleChange}"
        ></http-url-input>
      </section>
      <section class="demo-section">
        <h2 class="title-large">HTTP parameters form</h2>
        <http-url-params-form .value="${this.value || ''}" @change="${this.handleParamsChange}"></http-url-params-form>
      </section>
    `
  }
}

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