import { __decorate } from "tslib";
import { html, nothing } from "lit";
import { Events as CoreEvents, CertificateFileKind, } from '@api-client/core/build/browser.js';
import { state } from "lit/decorators.js";
import { Authorization } from "./Authorization.js";
import { Events } from "../../../events/Events.js";
import '../../../define/ui/ui-dropdown-list.js';
import '../../../define/ui/ui-button.js';
import '../../../define/ui/ui-icon-button.js';
import '../../../define/ui/ui-icon.js';
import '../../../define/store/file-picker.js';
export default class CcAuthorization extends Authorization {
    constructor() {
        super(...arguments);
        this.selectorRendered = false;
    }
    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 class="dropdown-trigger" type="tonal">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>
    `;
    }
}
__decorate([
    state()
], CcAuthorization.prototype, "selectorRendered", void 0);
//# sourceMappingURL=CcAuthorization.js.map