import { __decorate } 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 '../../../define/ui/ui-icon-button.js';
import '../../../define/ui/ui-switch.js';
import '../../../define/ui/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.
 */
export class Authorization extends ApiElement {
    constructor() {
        super(...arguments);
        /**
         * Whether the UI is in the disabled state.
         * @attribute
         */
        this.disabled = false;
        /**
         * Whether the UI is in the read only state.
         * @attribute
         */
        this.readOnly = false;
        /**
         * Whether the element is currently authorizing the user.
         * @attribute
         */
        this.authorizing = false;
    }
    /**
     * 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>
    `;
    }
}
__decorate([
    query('form', true)
], Authorization.prototype, "form", void 0);
__decorate([
    property({ type: Object })
], Authorization.prototype, "authorization", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], Authorization.prototype, "disabled", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], Authorization.prototype, "readOnly", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], Authorization.prototype, "authorizing", void 0);
__decorate([
    property({ type: Boolean })
], Authorization.prototype, "canToggle", void 0);
__decorate([
    property({ type: Boolean })
], Authorization.prototype, "canDelete", void 0);
//# sourceMappingURL=Authorization.js.map