import { __esDecorate, __runInitializers } from "tslib";
import { html, nothing } from 'lit';
import { query } from 'lit/decorators.js';
import { live } from 'lit/directives/live.js';
import { Authorization } from './Authorization.js';
import '../../../md/text-field/ui-filled-text-field.js';
import '../../../md/list/ui-list.js';
import '../../../md/list/ui-list-item.js';
import '../../../md/dropdown-list/ui-dropdown-list.js';
import '../../../md/icons/ui-icon.js';
const LabelsMap = {
    cookie: 'Cookies',
    header: 'Headers',
    query: 'Query string',
    path: 'URL path',
};
let ApiKeyAuthorization = (() => {
    let _classSuper = Authorization;
    let _keyInput_decorators;
    let _keyInput_initializers = [];
    let _keyInput_extraInitializers = [];
    let _valueInput_decorators;
    let _valueInput_initializers = [];
    let _valueInput_extraInitializers = [];
    return class ApiKeyAuthorization extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _keyInput_decorators = [query('[name="key"]')];
            _valueInput_decorators = [query('[name="value"]')];
            __esDecorate(this, null, _keyInput_decorators, { kind: "accessor", name: "keyInput", static: false, private: false, access: { has: obj => "keyInput" in obj, get: obj => obj.keyInput, set: (obj, value) => { obj.keyInput = value; } }, metadata: _metadata }, _keyInput_initializers, _keyInput_extraInitializers);
            __esDecorate(this, null, _valueInput_decorators, { kind: "accessor", name: "valueInput", static: false, private: false, access: { has: obj => "valueInput" in obj, get: obj => obj.valueInput, set: (obj, value) => { obj.valueInput = value; } }, metadata: _metadata }, _valueInput_initializers, _valueInput_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #keyInput_accessor_storage = __runInitializers(this, _keyInput_initializers, void 0);
        get keyInput() { return this.#keyInput_accessor_storage; }
        set keyInput(value) { this.#keyInput_accessor_storage = value; }
        #valueInput_accessor_storage = (__runInitializers(this, _keyInput_extraInitializers), __runInitializers(this, _valueInput_initializers, void 0));
        get valueInput() { return this.#valueInput_accessor_storage; }
        set valueInput(value) { this.#valueInput_accessor_storage = value; }
        get keyLocation() {
            const { authorization } = this;
            if (!authorization) {
                return 'query';
            }
            const config = authorization.config || {};
            if (config.cookie) {
                return 'cookie';
            }
            if (config.header) {
                return 'header';
            }
            return 'query';
        }
        checkValidity() {
            const { elements } = this.form;
            return !Array.from(elements).some((node) => !node.checkValidity());
        }
        handleChange() {
            const { authorization } = this;
            if (!authorization) {
                return;
            }
            if (!authorization.config) {
                authorization.config = {};
            }
            const { value: keyName } = this.keyInput;
            const { value } = this.valueInput;
            if (!keyName) {
                return;
            }
            authorization.config = {
                [this.keyLocation]: {
                    [keyName]: value,
                },
            };
            this.notifyChange();
        }
        handleLocationChange(e) {
            const target = e.detail.item;
            if (!target) {
                return;
            }
            const { authorization } = this;
            if (!authorization) {
                return;
            }
            const config = authorization.config || {};
            const selected = target.dataset.value;
            const currentKey = this.keyLocation;
            const currentValue = config[currentKey];
            authorization.config = {
                [selected]: currentValue || {},
            };
            this.notifyChange();
            this.requestUpdate();
        }
        render() {
            return html ` ${this.renderHeader()} ${this.renderEditor()} `;
        }
        renderEditor() {
            const { authorization } = this;
            if (!authorization) {
                return nothing;
            }
            const config = authorization.config || {};
            return html `
      <form autocomplete="on" class="auth-form basic-auth">
        ${this.renderKeyName(config)} ${this.renderKeyValue(config)} ${this.renderLocation()}
      </form>
      ${this.renderAuthInfo()}
    `;
        }
        renderKeyName(config) {
            const { keyLocation } = this;
            let value;
            const map = config[keyLocation];
            if (map) {
                ;
                [value] = Object.keys(map);
            }
            return html `
      <div class="full-input">
        <ui-filled-text-field
          label="Key name"
          name="key"
          .value="${live(value || '')}"
          required
          invalidText="The key name is required"
          ?disabled="${this.disabled}"
          ?readOnly="${this.readOnly}"
          @change="${this.handleChange}"
        ></ui-filled-text-field>
      </div>
    `;
        }
        renderKeyValue(config) {
            const { keyLocation } = this;
            let value;
            const map = config[keyLocation];
            if (map) {
                const key = Object.keys(map)[0];
                if (key) {
                    value = map[key];
                }
            }
            return html `
      <div class="full-input">
        <ui-filled-text-field
          label="Value"
          name="value"
          type="password"
          .value="${live(value || '')}"
          required
          invalidText="The key is required"
          ?disabled="${this.disabled}"
          ?readOnly="${this.readOnly}"
          @change="${this.handleChange}"
        ></ui-filled-text-field>
      </div>
    `;
        }
        renderLocation() {
            const { keyLocation } = this;
            const label = LabelsMap[keyLocation];
            return html `
      <ui-dropdown-list
        verticalAlign="top"
        @select="${this.handleLocationChange}"
        class="type-dropdown"
        closeOnOutsideClick
      >
        <ui-filled-text-field readOnly name="location" .value="${label}" label="Key location">
          <ui-icon slot="suffix" icon="arrowDropDown" role="presentation"></ui-icon>
        </ui-filled-text-field>
        <ui-list slot="dropdown" role="menu">
          <ui-list-item role="menuitem" data-value="query" title="Place the key in the query string"
            >${LabelsMap.query}</ui-list-item
          >
          <ui-list-item role="menuitem" data-value="header" title="Place the key in the header value"
            >${LabelsMap.header}</ui-list-item
          >
          <ui-list-item role="menuitem" data-value="cookie" title="Place the key in the cookies value"
            >${LabelsMap.cookie}</ui-list-item
          >
        </ui-list>
      </ui-dropdown-list>
    `;
        }
        constructor() {
            super(...arguments);
            __runInitializers(this, _valueInput_extraInitializers);
        }
    };
})();
export default ApiKeyAuthorization;
//# sourceMappingURL=ApiKeyAuthorization.js.map