import { __esDecorate, __runInitializers } from "tslib";
import { html, nothing } from 'lit';
import { property, query } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import ApiElement from '../../ApiElement.js';
import { authTypeToLabel } from '../AuthLabels.js';
import '../../../md/icon-button/ui-icon-button.js';
import '../../../md/switch/ui-switch.js';
import '../../../md/icons/ui-icon.js';
/**
 * An authorization element renders an UI allowing the user to provide client credentials.
 *
 * @fires delete - When the user requests to delete this authorization.
 * @fires change - When authorization values have changed via a user interaction.
 */
let Authorization = (() => {
    let _classSuper = ApiElement;
    let _form_decorators;
    let _form_initializers = [];
    let _form_extraInitializers = [];
    let _authorization_decorators;
    let _authorization_initializers = [];
    let _authorization_extraInitializers = [];
    let _disabled_decorators;
    let _disabled_initializers = [];
    let _disabled_extraInitializers = [];
    let _readOnly_decorators;
    let _readOnly_initializers = [];
    let _readOnly_extraInitializers = [];
    let _authorizing_decorators;
    let _authorizing_initializers = [];
    let _authorizing_extraInitializers = [];
    let _canToggle_decorators;
    let _canToggle_initializers = [];
    let _canToggle_extraInitializers = [];
    let _canDelete_decorators;
    let _canDelete_initializers = [];
    let _canDelete_extraInitializers = [];
    return class Authorization extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _form_decorators = [query('form', true)];
            _authorization_decorators = [property({ type: Object })];
            _disabled_decorators = [property({ type: Boolean, reflect: true })];
            _readOnly_decorators = [property({ type: Boolean, reflect: true })];
            _authorizing_decorators = [property({ type: Boolean, reflect: true })];
            _canToggle_decorators = [property({ type: Boolean })];
            _canDelete_decorators = [property({ type: Boolean })];
            __esDecorate(this, null, _form_decorators, { kind: "accessor", name: "form", static: false, private: false, access: { has: obj => "form" in obj, get: obj => obj.form, set: (obj, value) => { obj.form = value; } }, metadata: _metadata }, _form_initializers, _form_extraInitializers);
            __esDecorate(this, null, _authorization_decorators, { kind: "accessor", name: "authorization", static: false, private: false, access: { has: obj => "authorization" in obj, get: obj => obj.authorization, set: (obj, value) => { obj.authorization = value; } }, metadata: _metadata }, _authorization_initializers, _authorization_extraInitializers);
            __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
            __esDecorate(this, null, _readOnly_decorators, { kind: "accessor", name: "readOnly", static: false, private: false, access: { has: obj => "readOnly" in obj, get: obj => obj.readOnly, set: (obj, value) => { obj.readOnly = value; } }, metadata: _metadata }, _readOnly_initializers, _readOnly_extraInitializers);
            __esDecorate(this, null, _authorizing_decorators, { kind: "accessor", name: "authorizing", static: false, private: false, access: { has: obj => "authorizing" in obj, get: obj => obj.authorizing, set: (obj, value) => { obj.authorizing = value; } }, metadata: _metadata }, _authorizing_initializers, _authorizing_extraInitializers);
            __esDecorate(this, null, _canToggle_decorators, { kind: "accessor", name: "canToggle", static: false, private: false, access: { has: obj => "canToggle" in obj, get: obj => obj.canToggle, set: (obj, value) => { obj.canToggle = value; } }, metadata: _metadata }, _canToggle_initializers, _canToggle_extraInitializers);
            __esDecorate(this, null, _canDelete_decorators, { kind: "accessor", name: "canDelete", static: false, private: false, access: { has: obj => "canDelete" in obj, get: obj => obj.canDelete, set: (obj, value) => { obj.canDelete = value; } }, metadata: _metadata }, _canDelete_initializers, _canDelete_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #form_accessor_storage = __runInitializers(this, _form_initializers, void 0);
        /**
         * The form element in the UI.
         */
        get form() { return this.#form_accessor_storage; }
        set form(value) { this.#form_accessor_storage = value; }
        #authorization_accessor_storage = (__runInitializers(this, _form_extraInitializers), __runInitializers(this, _authorization_initializers, void 0));
        /**
         * The request authorization object keeping the config.
         * @attribute
         */
        get authorization() { return this.#authorization_accessor_storage; }
        set authorization(value) { this.#authorization_accessor_storage = value; }
        #disabled_accessor_storage = (__runInitializers(this, _authorization_extraInitializers), __runInitializers(this, _disabled_initializers, false
        /**
         * Whether the UI is in the read only state.
         * @attribute
         */
        ));
        /**
         * Whether the UI is in the disabled state.
         * @attribute
         */
        get disabled() { return this.#disabled_accessor_storage; }
        set disabled(value) { this.#disabled_accessor_storage = value; }
        #readOnly_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _readOnly_initializers, false
        /**
         * Whether the element is currently authorizing the user.
         * @attribute
         */
        ));
        /**
         * Whether the UI is in the read only state.
         * @attribute
         */
        get readOnly() { return this.#readOnly_accessor_storage; }
        set readOnly(value) { this.#readOnly_accessor_storage = value; }
        #authorizing_accessor_storage = (__runInitializers(this, _readOnly_extraInitializers), __runInitializers(this, _authorizing_initializers, false
        /**
         * Whether the UI should render the toggle button to toggle the enabled state of the security scheme
         * @attribute
         */
        ));
        /**
         * Whether the element is currently authorizing the user.
         * @attribute
         */
        get authorizing() { return this.#authorizing_accessor_storage; }
        set authorizing(value) { this.#authorizing_accessor_storage = value; }
        #canToggle_accessor_storage = (__runInitializers(this, _authorizing_extraInitializers), __runInitializers(this, _canToggle_initializers, void 0));
        /**
         * Whether the UI should render the toggle button to toggle the enabled state of the security scheme
         * @attribute
         */
        get canToggle() { return this.#canToggle_accessor_storage; }
        set canToggle(value) { this.#canToggle_accessor_storage = value; }
        #canDelete_accessor_storage = (__runInitializers(this, _canToggle_extraInitializers), __runInitializers(this, _canDelete_initializers, void 0));
        /**
         * Whether the UI should render the delete button
         * @attribute
         */
        get canDelete() { return this.#canDelete_accessor_storage; }
        set canDelete(value) { this.#canDelete_accessor_storage = value; }
        /**
         * Toggles this authorization method enabled state.
         * This does noting when `authorization` is not set.
         */
        toggleEnabled() {
            const { authorization } = this;
            if (!authorization) {
                return;
            }
            authorization.enabled = !authorization.enabled;
            this.requestUpdate();
            this.notifyChange();
        }
        handleDelete() {
            this.dispatchEvent(new Event('delete'));
        }
        /**
         * Performs the authorization.
         * This only applies to methods that have any authorization to perform
         * like Oauth 2.
         */
        async authorize() {
            return null;
        }
        /**
         * @returns True when the element is valid.
         */
        checkValidity() {
            const { elements } = this.form;
            return !Array.from(elements).some((node) => !node.checkValidity());
        }
        renderHeader() {
            const { authorization } = this;
            if (!authorization) {
                return nothing;
            }
            const classes = {
                'auth-header': true,
                'centered': !this.canDelete && !this.canToggle,
            };
            return html `
      <div class="${classMap(classes)}">
        ${this.renderToggleSwitch(authorization)} ${this.renderTitle(authorization)} ${this.renderDeleteButton()}
      </div>
    `;
        }
        renderAuthInfo() {
            return html `
      <p class="auth-info">
        Note that the authorization header will be added when the request is sent. We encourage you to use variables to
        insert sensitive data.
      </p>
    `;
        }
        renderToggleSwitch(authorization) {
            const { canToggle } = this;
            if (!canToggle) {
                return nothing;
            }
            return html `
      <ui-switch
        .checked="${!!authorization.enabled}"
        @change="${this.toggleEnabled}"
        aria-label="Toggle this authorization"
        ?disabled="${this.readOnly || this.disabled}"
      ></ui-switch>
    `;
        }
        renderTitle(authorization) {
            const { type } = authorization;
            const label = authTypeToLabel(type || '');
            return html ` <span class="auth-title">${label}</span> `;
        }
        renderDeleteButton() {
            const { canDelete } = this;
            if (!canDelete) {
                return nothing;
            }
            return html `
      <ui-icon-button
        aria-label="Delete this authorization"
        title="Removes this authorization definition"
        @click="${this.handleDelete}"
        ?disabled="${this.readOnly}"
      >
        <ui-icon icon="deleteOutline" role="presentation"></ui-icon>
      </ui-icon-button>
    `;
        }
        constructor() {
            super(...arguments);
            __runInitializers(this, _canDelete_extraInitializers);
        }
    };
})();
export { Authorization };
//# sourceMappingURL=Authorization.js.map