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 { UMB_CURRENT_USER_CONTEXT } from '../../current-user.context.token.js';
import { UMB_AUTH_CONTEXT } from '../../../../core/auth/index.js';
import { UmbTextStyles } from '../../../../core/style/index.js';
import { css, html, customElement, property, state } from '../../../../../external/lit/index.js';
import { UmbLitElement } from '../../../../core/lit-element/index.js';
let UmbCurrentUserModalElement = class UmbCurrentUserModalElement extends UmbLitElement {
    #currentUserContext;
    constructor() {
        super();
        this.consumeContext(UMB_CURRENT_USER_CONTEXT, (instance) => {
            this.#currentUserContext = instance;
            this._observeCurrentUser();
        });
    }
    async _observeCurrentUser() {
        if (!this.#currentUserContext)
            return;
        this.observe(this.#currentUserContext.currentUser, (currentUser) => {
            this._currentUser = currentUser;
        }, 'umbCurrentUserObserver');
    }
    _close() {
        this.modalContext?.submit();
    }
    async _logout() {
        const authContext = await this.getContext(UMB_AUTH_CONTEXT);
        if (!authContext) {
            throw new Error('UMB_AUTH_CONTEXT could not be retrieved, this is required to log out the user.');
        }
        this._logOutButtonState = 'waiting';
        await authContext.signOut();
        this._logOutButtonState = 'success';
    }
    render() {
        return html `
			<umb-body-layout headline="${this._currentUser?.name || ''}">
				<div id="main">
					<umb-extension-slot id="userProfileApps" type="userProfileApp"></umb-extension-slot>
				</div>
				<div slot="actions">
					<uui-button @click=${this._close} look="secondary" .label=${this.localize.term('general_close')}>
						${this.localize.term('general_close')}
					</uui-button>
					<uui-button
						@click=${this._logout}
						.state=${this._logOutButtonState}
						look="primary"
						color="danger"
						.label=${this.localize.term('general_logout')}>
						${this.localize.term('general_logout')}
					</uui-button>
				</div>
			</umb-body-layout>
		`;
    }
    static { this.styles = [
        UmbTextStyles,
        css `
			:host {
				color: var(--uui-color-text);
			}
			#main {
				display: flex;
				flex-direction: column;
				gap: var(--uui-size-space-3);
			}
			#umbraco-id-buttons {
				display: flex;
				flex-direction: column;
				gap: var(--uui-size-space-3);
			}
			#userProfileApps {
				display: flex;
				flex-direction: column;
				gap: var(--uui-size-space-3);
			}
		`,
    ]; }
};
__decorate([
    property({ attribute: false })
], UmbCurrentUserModalElement.prototype, "modalContext", void 0);
__decorate([
    state()
], UmbCurrentUserModalElement.prototype, "_currentUser", void 0);
__decorate([
    state()
], UmbCurrentUserModalElement.prototype, "_logOutButtonState", void 0);
UmbCurrentUserModalElement = __decorate([
    customElement('umb-current-user-modal')
], UmbCurrentUserModalElement);
export { UmbCurrentUserModalElement };
export default UmbCurrentUserModalElement;
