import { __esDecorate, __runInitializers } 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 UiDialog from '../../../md/dialog/internals/Dialog.js';
import { SetCookieStep } from '@api-client/core/models/http-flows/steps/data/SetCookieStep.js';
import '../../../md/text-field/ui-filled-text-field.js';
import '../../../md/checkbox/ui-checkbox.js';
let SetCookieAction = (() => {
    let _classSuper = UiDialog;
    let _step_decorators;
    let _step_initializers = [];
    let _step_extraInitializers = [];
    return class SetCookieAction extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _step_decorators = [property({ type: Object })];
            __esDecorate(this, null, _step_decorators, { kind: "accessor", name: "step", static: false, private: false, access: { has: obj => "step" in obj, get: obj => obj.step, set: (obj, value) => { obj.step = value; } }, metadata: _metadata }, _step_initializers, _step_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #step_accessor_storage = __runInitializers(this, _step_initializers, void 0);
        get step() { return this.#step_accessor_storage; }
        set step(value) { this.#step_accessor_storage = value; }
        dialogValue = (__runInitializers(this, _step_extraInitializers), new SetCookieStep().toJSON());
        constructor() {
            super();
            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-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>
    `;
        }
    };
})();
/**
 * A dialog used by the Flow builder to configure the Set Cookie action.
 */
export default SetCookieAction;
//# sourceMappingURL=SetCookieAction.element.js.map