import { type TemplateResult, html, type PropertyValues } from 'lit'
import { property } from 'lit/decorators.js'
import { live } from 'lit/directives/live.js'
import { type ClassInfo, classMap } from 'lit/directives/class-map.js'
import UiDialog from '../../../md/dialog/internals/Dialog.js'
import type Input from '../../../md/input/Input.js'
import type CheckboxElement from '../../../md/checkbox/internals/CheckboxElement.js'
import { type ISetCookieStep, SetCookieStep } from '@api-client/core/models/http-flows/steps/data/SetCookieStep.js'
import type { SameSiteValue } from '@api-client/core/cookies/CookieParser.js'

import '../../../md/text-field/ui-filled-text-field.js'
import '../../../md/checkbox/ui-checkbox.js'

/**
 * A dialog used by the Flow builder to configure the Set Cookie action.
 */
export default class SetCookieAction extends UiDialog {
  @property({ type: Object }) accessor step: ISetCookieStep | undefined

  override dialogValue: ISetCookieStep = new SetCookieStep().toJSON()

  constructor() {
    super()
    this.dismissLabel = 'Cancel'
    this.confirmLabel = 'Save'
  }

  override willUpdate(cp: PropertyValues<this>): void {
    if (cp.has('step')) {
      this.setupDialogValue()
    }
    super.willUpdate(cp)
  }

  protected setupDialogValue(): void {
    const { step } = this
    if (!step) {
      this.dialogValue = new SetCookieStep().toJSON()
    } else {
      this.dialogValue = new SetCookieStep(step).toJSON()
    }
  }

  protected handleValueChange(e: Event): void {
    const input = e.target as Input
    const name = input.name as 'name' | 'url' | 'expires'
    this.dialogValue[name] = input.value
  }

  protected handleBooleanChange(e: Event): void {
    const input = e.target as CheckboxElement
    const name = input.name as 'hostOnly' | 'httpOnly' | 'secure' | 'session'
    this.dialogValue[name] = input.checked as boolean
  }

  protected handleSameSiteChange(e: Event): void {
    const input = e.target as Input
    this.dialogValue.sameSite = input.value as SameSiteValue
  }

  override renderIcon(): TemplateResult {
    const classes: ClassInfo = {
      'icon': true,
      'with-icon': true,
    }
    return html`
      <div class="${classMap(classes)}" part="icon"><ui-icon icon="tune" role="presentation"></ui-icon></div>
    `
  }

  override renderTitle(): TemplateResult {
    const classes: ClassInfo = {
      'title': true,
      'with-title': true,
    }
    return html` <div class="${classMap(classes)}" part="title"><span>Configure Set Cookie Action</span></div> `
  }

  override renderBody(): TemplateResult {
    const {
      name = '',
      url = '',
      expires = '',
      hostOnly = false,
      httpOnly = false,
      sameSite = 'None',
      secure = false,
      session = false,
    } = this.dialogValue

    return html`
      <div class="content">
        <div class="param-row">
          <ui-filled-text-field
            name="name"
            label="Cookie name"
            type="text"
            required
            .value="${live(name)}"
            @change="${this.handleValueChange}"
            class="input"
            supportingText="The name of the cookie to set."
          ></ui-filled-text-field>
        </div>

        <div class="param-row">
          <ui-filled-text-field
            name="url"
            label="Cookie URL"
            type="url"
            .value="${live(url)}"
            @change="${this.handleValueChange}"
            class="input"
            supportingText="When the URL is not set then the request URL is used."
          ></ui-filled-text-field>
        </div>

        <div class="param-row">
          <ui-filled-text-field
            name="expires"
            label="Expires"
            .value="${live(expires)}"
            @change="${this.handleValueChange}"
            class="input"
            supportingText="A valid cookie date or relative time like 4d, 600s, etc."
          ></ui-filled-text-field>
        </div>

        <div class="param-row">
          <ui-filled-text-field
            name="sameSite"
            label="Same site"
            .value="${live(sameSite)}"
            @change="${this.handleSameSiteChange}"
            class="input"
            .list="${['Lax', 'Strict', 'None']}"
          ></ui-filled-text-field>
        </div>

        <div class="checkbox-row">
          <label>
            <ui-checkbox
              name="hostOnly"
              .checked="${hostOnly}"
              @change="${this.handleBooleanChange}"
              aria-label="Host only cookie"
            ></ui-checkbox>
            Host only
          </label>
        </div>

        <div class="checkbox-row">
          <label>
            <ui-checkbox
              name="httpOnly"
              .checked="${httpOnly}"
              @change="${this.handleBooleanChange}"
              aria-label="HTTP only cookie"
            ></ui-checkbox>
            HTTP only
          </label>
        </div>

        <div class="checkbox-row">
          <label>
            <ui-checkbox
              name="secure"
              .checked="${secure}"
              @change="${this.handleBooleanChange}"
              aria-label="Secure cookie"
            ></ui-checkbox>
            Secure
          </label>
        </div>

        <div class="checkbox-row">
          <label>
            <ui-checkbox
              name="session"
              .checked="${session}"
              @change="${this.handleBooleanChange}"
              aria-label="Session cookie"
            ></ui-checkbox>
            Session
          </label>
        </div>
      </div>
    `
  }
}
