import { html, nothing, TemplateResult } from 'lit'
import { live } from 'lit/directives/live.js'
import type { IBasicAuthorization } from '@api-client/core/models/Authorization.js'
import { Authorization } from './Authorization.js'
import Input from '../../../md/input/Input.js'
import '../../../md/text-field/ui-filled-text-field.js'

export default class BasicAuthorization extends Authorization {
  get config(): IBasicAuthorization {
    const { authorization } = this
    if (!authorization) {
      return {}
    }
    if (!authorization.config) {
      authorization.config = {} as IBasicAuthorization
    }
    return authorization.config as IBasicAuthorization
  }

  override checkValidity(): boolean {
    const { authorization } = this
    if (!authorization) {
      return true
    }

    const config = authorization.config as IBasicAuthorization
    return !!config && !!config.username
  }

  protected handleUsername(e: Event): void {
    const { authorization } = this
    if (!authorization) {
      return
    }
    const input = e.target as Input
    const { value } = input
    if (!authorization.config) {
      authorization.config = {} as IBasicAuthorization
    }
    ;(authorization.config as IBasicAuthorization).username = value
    this.notifyChange()
  }

  protected handlePassword(e: Event): void {
    const { authorization } = this
    if (!authorization) {
      return
    }
    const input = e.target as Input
    const { value } = input
    if (!authorization.config) {
      authorization.config = {} as IBasicAuthorization
    }
    ;(authorization.config as IBasicAuthorization).password = value
    this.notifyChange()
  }

  override render(): TemplateResult {
    return html` ${this.renderHeader()} ${this.renderEditor()} `
  }

  protected renderEditor(): TemplateResult | typeof nothing {
    const { authorization } = this
    if (!authorization) {
      return nothing
    }
    const config = (authorization.config as IBasicAuthorization) || ({} as IBasicAuthorization)
    return html`
      <form autocomplete="on" class="auth-form basic-auth">
        ${this.renderUsername(config)} ${this.renderPassword(config)}
      </form>
      ${this.renderAuthInfo()}
    `
  }

  protected renderUsername(config: IBasicAuthorization): TemplateResult {
    return html`
      <div class="full-input">
        <ui-filled-text-field
          label="Username"
          name="username"
          .value="${live(config.username || '')}"
          required
          invalidText="Username is required"
          ?disabled="${this.disabled}"
          ?readOnly="${this.readOnly}"
          @change="${this.handleUsername}"
        ></ui-filled-text-field>
      </div>
    `
  }

  protected renderPassword(config: IBasicAuthorization): TemplateResult {
    return html`
      <div class="full-input">
        <ui-filled-text-field
          label="Password"
          name="password"
          type="password"
          .value="${live(config.password || '')}"
          ?disabled="${this.disabled}"
          ?readOnly="${this.readOnly}"
          @change="${this.handlePassword}"
        ></ui-filled-text-field>
      </div>
    `
  }
}
