import { __esDecorate, __runInitializers } from "tslib";
import { html, nothing } from 'lit';
import { state } from 'lit/decorators.js';
import { Authorization } from './Authorization.js';
import { Events } from '../../../events/Events.js';
import '../../../md/dropdown-list/ui-dropdown-list.js';
import '../../../md/button/ui-button.js';
import '../../../md/icon-button/ui-icon-button.js';
import '../../../md/icons/ui-icon.js';
import { Events as CoreEvents } from '@api-client/core/events/Events.js';
import { CertificateFileKind } from '@api-client/core/models/kinds.js';
let CcAuthorization = (() => {
    let _classSuper = Authorization;
    let _selectorRendered_decorators;
    let _selectorRendered_initializers = [];
    let _selectorRendered_extraInitializers = [];
    return class CcAuthorization extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _selectorRendered_decorators = [state()];
            __esDecorate(this, null, _selectorRendered_decorators, { kind: "accessor", name: "selectorRendered", static: false, private: false, access: { has: obj => "selectorRendered" in obj, get: obj => obj.selectorRendered, set: (obj, value) => { obj.selectorRendered = value; } }, metadata: _metadata }, _selectorRendered_initializers, _selectorRendered_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #selectorRendered_accessor_storage = __runInitializers(this, _selectorRendered_initializers, false);
        get selectorRendered() { return this.#selectorRendered_accessor_storage; }
        set selectorRendered(value) { this.#selectorRendered_accessor_storage = value; }
        get config() {
            const { authorization } = this;
            if (!authorization) {
                return {};
            }
            if (!authorization.config) {
                authorization.config = {};
            }
            return authorization.config;
        }
        handleClose(e) {
            const { canceled, file } = e.detail;
            if (canceled) {
                return;
            }
            this.setCertificate(file.key);
            CoreEvents.Telemetry.event({
                category: 'Certificates',
                action: 'Authorization',
                label: 'selected-certificate',
            }, this);
        }
        async setCertificate(key) {
            let result;
            try {
                result = await Events.Store.File.read(key, true, this);
            }
            catch {
                return;
            }
            const { config } = this;
            config.certificate = result;
            this.requestUpdate();
            this.notifyChange();
        }
        handleDropDownOpen() {
            this.selectorRendered = true;
            if (this.isUpdatePending) {
                this.scheduleUpdate();
            }
        }
        handleClearCertificate() {
            const { config } = this;
            delete config.certificate;
            this.requestUpdate();
            this.notifyChange();
        }
        render() {
            return html ` ${this.renderHeader()} ${this.renderEditor()} `;
        }
        renderEditor() {
            const { config } = this;
            const { certificate } = config;
            // Note, the <form> element is required by the Authorization class for validation.
            return html `
      <form autocomplete="on" class="auth-form cc-auth"></form>
      ${this.renderSelector()} ${certificate ? this.renderSelection(certificate) : nothing}
    `;
        }
        renderSelector() {
            const { selectorRendered } = this;
            const kinds = [CertificateFileKind];
            return html `
      <div class="selector">
        <ui-dropdown-list @open="${this.handleDropDownOpen}">
          <ui-button color="tonal" class="dropdown-trigger">Select a certificate</ui-button>
          ${selectorRendered
                ? html `<file-picker slot="dropdown" .kinds="${kinds}" @close="${this.handleClose}"></file-picker>`
                : nothing}
        </ui-dropdown-list>
      </div>
    `;
        }
        renderSelection(certificate) {
            return html `
      <div class="certificate-info body-medium">
        Current certificate: ${certificate.name}
        <ui-icon-button
          aria-label="Remove certificate from authorization"
          title="Remove certificate from authorization"
          @click="${this.handleClearCertificate}"
        >
          <ui-icon role="presentation" icon="deleteOutline"></ui-icon>
        </ui-icon-button>
      </div>
    `;
        }
        constructor() {
            super(...arguments);
            __runInitializers(this, _selectorRendered_extraInitializers);
        }
    };
})();
// import '../../../define/store/file-picker.js'
export default CcAuthorization;
//# sourceMappingURL=CcAuthorization.js.map