import { html, TemplateResult } from 'lit'
import { type IRequestAuthorization, RequestAuthorization } from '@api-client/core/models/RequestAuthorization.js'
import { reactive } from '../../../src/decorators/index.js'
import { DemoPage } from '../../../src/demo/DemoPage.js'
import { Authorization } from '../../../src/elements/authorization/ui/Authorization.js'
import '../../../src/define/authorization/basic-authorization.js'

class ComponentDemoPage extends DemoPage {
  override accessor componentName = 'HTTP basic authorization'

  @reactive() accessor authorization: IRequestAuthorization

  constructor() {
    super()
    const auth = RequestAuthorization.fromTypedConfig('basic', {}, false)
    this.authorization = auth.toJSON()
  }

  handleChange(e: Event): void {
    const input = e.target as Authorization
    console.log('Value changed', input.authorization)
  }

  handleDelete(): void {
    console.log('Requested to delete.')
  }

  contentTemplate(): TemplateResult {
    return html`
      <a href="./">Back</a>
      <section class="demo-section">
        <basic-authorization
          .authorization="${this.authorization}"
          @change="${this.handleChange}"
          @delete="${this.handleDelete}"
        ></basic-authorization>
      </section>
    `
  }
}

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