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 { DeleteCookieStep } from "@api-client/core/build/browser.js";
import UiDialog from "../../ui/dialog/UiDialog.js";
import '../../define/ui/ui-text-field.js';
/**
 * A dialog used by the Flow builder to configure the Delete Cookie action.
 */
export default class DeleteCookieAction extends UiDialog {
    constructor() {
        super();
        this.dialogValue = new DeleteCookieStep().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 DeleteCookieStep().toJSON();
        }
        else {
            this.dialogValue = new DeleteCookieStep(step).toJSON();
        }
    }
    handleUrlChange(e) {
        const input = e.target;
        this.dialogValue.url = input.value;
    }
    handleNameChange(e) {
        const input = e.target;
        this.dialogValue.name = 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 Delete Cookie Action</span></div>
    `;
    }
    renderBody() {
        const { name = '', url = '' } = this.dialogValue;
        return html `
    <div class="content">
      <div class="param-row">
        <ui-text-field
          name="name"
          label="Cookie name"
          type="text"
          .value="${live(name)}"
          @change="${this.handleNameChange}"
          class="input"
          supportingText="Leave empty to delete all cookies for the URL."
        ></ui-text-field>
      </div>
      <div class="param-row">
        <ui-text-field
          name="url"
          label="Cookie URL"
          type="url"
          .value="${live(url)}"
          @change="${this.handleUrlChange}"
          class="input"
          supportingText="When the URL is not set then the request URL is used."
        ></ui-text-field>
      </div>
    </div>
    `;
    }
}
__decorate([
    property({ type: Object })
], DeleteCookieAction.prototype, "step", void 0);
//# sourceMappingURL=DeleteCookieAction.element.js.map