var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { UmbUserRepository } from '../../repository/index.js';
import { css, customElement, html, nothing, property, repeat, state, when } from '../../../../../external/lit/index.js';
import { UmbLitElement } from '../../../../core/lit-element/index.js';
import { umbConfirmModal } from '../../../../core/modal/index.js';
import { UmbTextStyles } from '../../../../core/style/index.js';
import { umbExtensionsRegistry } from '../../../../core/extension-registry/index.js';
import { mergeObservables } from '../../../../../libs/observable-api/index.js';
let UmbUserMfaModalElement = class UmbUserMfaModalElement extends UmbLitElement {
    constructor() {
        super(...arguments);
        this._items = [];
        this.#unique = '';
        this.#userRepository = new UmbUserRepository(this);
    }
    #unique;
    #userRepository;
    firstUpdated() {
        this.#unique = this.modalContext?.data.unique ?? '';
        this.#loadProviders();
    }
    async #loadProviders() {
        const serverLoginProviders$ = (await this.#userRepository.requestMfaProviders(this.#unique)).asObservable();
        const manifestLoginProviders$ = umbExtensionsRegistry.byType('mfaLoginProvider');
        // Merge the server and manifest providers to get the final list of providers
        const mfaLoginProviders$ = mergeObservables([serverLoginProviders$, manifestLoginProviders$], ([serverLoginProviders, manifestLoginProviders]) => {
            return manifestLoginProviders.map((manifestLoginProvider) => {
                const serverLoginProvider = serverLoginProviders.find((serverLoginProvider) => serverLoginProvider.providerName === manifestLoginProvider.forProviderName);
                return {
                    existsOnServer: !!serverLoginProvider,
                    isEnabledOnUser: serverLoginProvider?.isEnabledOnUser ?? false,
                    providerName: serverLoginProvider?.providerName ?? manifestLoginProvider.forProviderName,
                    displayName: manifestLoginProvider.meta?.label ?? serverLoginProvider?.providerName ?? manifestLoginProvider.name,
                };
            });
        });
        this.observe(mfaLoginProviders$, (providers) => {
            this._items = providers;
        }, '_mfaLoginProviders');
    }
    #close() {
        this.modalContext?.submit();
    }
    render() {
        return html `
			<umb-body-layout headline="${this.localize.term('member_2fa')}">
				<div id="main">
					${when(this._items.length > 0, () => html `
							${repeat(this._items, (item) => item.providerName, (item) => this.#renderProvider(item))}
						`)}
				</div>
				<div slot="actions">
					<uui-button @click=${this.#close} look="secondary" .label=${this.localize.term('general_close')}></uui-button>
				</div>
			</umb-body-layout>
		`;
    }
    /**
     * Render a provider with a toggle to enable/disable it
     * @param item
     */
    #renderProvider(item) {
        return html `
			<uui-box headline=${item.displayName}>
				${when(item.existsOnServer, () => nothing, () => html `<div style="position:relative" slot="header-actions">
							<uui-badge
								style="cursor:default"
								title="Warning: This provider is not configured on the server"
								color="danger"
								look="primary">
								!
							</uui-badge>
						</div>`)}
				${when(item.isEnabledOnUser, () => html `
						<p style="margin-top:0">
							<umb-localize key="user_2faProviderIsEnabled">This two-factor provider is enabled</umb-localize>
						</p>
						<uui-button
							type="button"
							look="secondary"
							color="danger"
							.label=${this.localize.term('actions_disable')}
							@click=${() => this.#onProviderDisable(item)}></uui-button>
					`, () => html `
						<uui-button
							disabled
							type="button"
							look="secondary"
							.label=${this.localize.term('actions_enable')}></uui-button>
					`)}
			</uui-box>
		`;
    }
    /**
     * This method is called when the user clicks the disable button on a provider.
     * It will show a confirmation dialog and then disable the provider if the user confirms.
     * NB! The user must have administrative rights before doing so.
     * @param item
     */
    async #onProviderDisable(item) {
        await umbConfirmModal(this, {
            headline: this.localize.term('actions_disable'),
            content: this.localize.term('user_2faDisableForUser', item.displayName),
            confirmLabel: this.localize.term('actions_disable'),
            color: 'danger',
        });
        await this.#userRepository.disableMfaProvider(this.#unique, item.providerName, item.displayName);
        this.#loadProviders();
    }
    static { this.styles = [
        UmbTextStyles,
        css `
			uui-box {
				margin-bottom: var(--uui-size-space-3);
			}
		`,
    ]; }
};
__decorate([
    property({ attribute: false })
], UmbUserMfaModalElement.prototype, "modalContext", void 0);
__decorate([
    state()
], UmbUserMfaModalElement.prototype, "_items", void 0);
UmbUserMfaModalElement = __decorate([
    customElement('umb-user-mfa-modal')
], UmbUserMfaModalElement);
export { UmbUserMfaModalElement };
export default UmbUserMfaModalElement;
