import { __decorate } from "tslib";
import { html } from 'lit';
import { property } from 'lit/decorators.js';
import { live } from 'lit/directives/live.js';
import { classMap } from 'lit/directives/class-map.js';
import { SetCookieStep } from "@api-client/core/build/browser.js";
import UiDialog from "../../ui/dialog/UiDialog.js";
import '../../define/ui/ui-text-field.js';
import '../../define/ui/ui-checkbox.js';
/**
 * A dialog used by the Flow builder to configure the Set Cookie action.
 */
export default class SetCookieAction extends UiDialog {
    constructor() {
        super();
        this.dialogValue = new SetCookieStep().toJSON();
        this.dismissLabel = 'Cancel';
        this.confirmLabel = 'Save';
    }
    willUpdate(cp) {
        if (cp.has('step')) {
            this.setupDialogValue();
        }
        super.willUpdate(cp);
    }
    setupDialogValue() {
        const { step } = this;
        if (!step) {
            this.dialogValue = new SetCookieStep().toJSON();
        }
        else {
            this.dialogValue = new SetCookieStep(step).toJSON();
        }
    }
    handleValueChange(e) {
        const input = e.target;
        const name = input.name;
        this.dialogValue[name] = input.value;
    }
    handleBooleanChange(e) {
        const input = e.target;
        const name = input.name;
        this.dialogValue[name] = input.checked;
    }
    handleSameSiteChange(e) {
        const input = e.target;
        this.dialogValue.sameSite = input.value;
    }
    renderIcon() {
        const classes = {
            icon: true,
            'with-icon': true,
        };
        return html `
    <div class="${classMap(classes)}" part="icon"><ui-icon icon="tune" role="presentation"></ui-icon></div>
    `;
    }
    renderTitle() {
        const classes = {
            title: true,
            'with-title': true,
        };
        return html `
    <div class="${classMap(classes)}" part="title"><span>Configure Set Cookie Action</span></div>
    `;
    }
    renderBody() {
        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-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-text-field>
      </div>

      <div class="param-row">
        <ui-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-text-field>
      </div>

      <div class="param-row">
        <ui-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-text-field>
      </div>

      <div class="param-row">
        <ui-text-field
          name="sameSite"
          label="Same site"
          .value="${live(sameSite)}"
          @change="${this.handleSameSiteChange}"
          class="input"
          .list="${['Lax', 'Strict', 'None']}"
        ></ui-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>
    `;
    }
}
__decorate([
    property({ type: Object })
], SetCookieAction.prototype, "step", void 0);
//# sourceMappingURL=SetCookieAction.element.js.map