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_AUTH_CONTEXT } from '../auth.context.token.js';
import { UmbTextStyles } from '../../style/index.js';
import { css, customElement, html, property, state, when } from '../../../../external/lit/index.js';
import { UMB_SERVER_CONTEXT } from '../../server/index.js';
import { UmbLitElement } from '../../lit-element/index.js';
/**
 * A reusable auth login view that renders the full login screen (background, logo, greeting, providers).
 * Can be used standalone as a page or composed inside a modal wrapper.
 */
let UmbAuthViewElement = class UmbAuthViewElement extends UmbLitElement {
    constructor() {
        super(...arguments);
        this.userLoginState = 'loggedOut';
        this._serverUrl = '';
        this._loading = true;
        this._allowLocalLogin = false;
        this.#filterProvider = (provider) => {
            if (this._allowLocalLogin) {
                return true;
            }
            // Do not show any Umbraco auth provider if local login is disabled
            return provider.forProviderName.toLowerCase() !== 'umbraco';
        };
        this.#onSubmit = async (providerOrManifest, loginHint) => {
            try {
                const authContext = await this.getContext(UMB_AUTH_CONTEXT);
                if (!authContext) {
                    throw new Error('Auth context not available');
                }
                const manifest = typeof providerOrManifest === 'string' ? undefined : providerOrManifest;
                const providerName = typeof providerOrManifest === 'string' ? providerOrManifest : providerOrManifest.forProviderName;
                // If the user is timed out, we do not want to lose the state, so avoid redirecting to the provider
                // and instead just make the authorization request. In all other cases, we want to redirect to the provider.
                const isTimedOut = this.userLoginState === 'timedOut';
                await authContext.makeAuthorizationRequest(providerName, isTimedOut ? false : true, loginHint, manifest);
                const isAuthed = authContext.getIsAuthorized();
                if (isAuthed) {
                    this.onSuccess?.();
                }
            }
            catch (error) {
                console.error('[AuthView] Error submitting auth request', error);
                this._error = error instanceof Error ? error.message : 'Unknown error (see console)';
            }
        };
    }
    get props() {
        return {
            userLoginState: this.userLoginState,
            onSubmit: this.#onSubmit.bind(this),
        };
    }
    get headline() {
        return this.userLoginState === 'timedOut'
            ? this.localize.term('login_instruction')
            : this.localize.term([
                'login_greeting0',
                'login_greeting1',
                'login_greeting2',
                'login_greeting3',
                'login_greeting4',
                'login_greeting5',
                'login_greeting6',
            ][new Date().getDay()]);
    }
    firstUpdated() {
        this.consumeContext(UMB_SERVER_CONTEXT, (context) => {
            this._serverUrl = context?.getServerUrl() ?? '';
            this.style.setProperty('--image', `url('${this._serverUrl}/umbraco/management/api/v1/security/back-office/graphics/login-background') no-repeat center center/cover`);
            const serverConnection = context?.getServerConnection();
            this.observe(serverConnection?.allowLocalLogin, (allowLocalLogin) => {
                this._allowLocalLogin = allowLocalLogin ?? false;
            });
            this.observe(serverConnection?.isConnected, (isConnected) => {
                this._loading = !isConnected;
            });
        });
    }
    render() {
        return html `
			<div id="layout">
				<img
					id="logo-on-background"
					src="${this._serverUrl}/umbraco/management/api/v1/security/back-office/graphics/login-logo-alternative"
					alt="Logo"
					aria-hidden="true"
					part="auth-logo-background" />
				<div id="graphic" aria-hidden="true">
					<img
						part="auth-logo"
						id="logo-on-image"
						src="${this._serverUrl}/umbraco/management/api/v1/security/back-office/graphics/login-logo"
						alt="Logo" />
					<svg
						id="curve-top"
						width="1746"
						height="1374"
						viewBox="0 0 1746 1374"
						fill="none"
						xmlns="http://www.w3.org/2000/svg">
						<path d="M8 1C61.5 722.5 206.5 1366.5 1745.5 1366.5" stroke="currentColor" stroke-width="15"></path>
					</svg>
					<svg
						id="curve-bottom"
						width="1364"
						height="552"
						viewBox="0 0 1364 552"
						fill="none"
						xmlns="http://www.w3.org/2000/svg">
						<path d="M1 8C387 24 1109 11 1357 548" stroke="currentColor" stroke-width="15"></path>
					</svg>
				</div>
				<div id="content-container">
					<div id="content">
						<header id="header">
							<h1 id="greeting">${this.headline}</h1>
						</header>
						${this._error ? html `<p style="margin-top:0;color:red">${this._error}</p>` : ''}
						${this.userLoginState === 'timedOut'
            ? html `<p style="margin-top:0">${this.localize.term('login_timeout')}</p>`
            : ''}
						${when(this._loading, () => html `
								<div id="loader">
									<uui-loader></uui-loader>
								</div>
							`, () => html ` <umb-extension-slot
									id="providers"
									type="authProvider"
									default-element="umb-auth-provider-default"
									.props=${this.props}
									.filter=${this.#filterProvider}></umb-extension-slot>`)}
					</div>
				</div>
			</div>
		`;
    }
    #filterProvider;
    #onSubmit;
    static { this.styles = [
        UmbTextStyles,
        css `
			:host {
				display: flex;
				justify-content: center;
				width: 100vw;

				background: var(--uui-color-background, #f4f4f4);

				--curves-color: var(--umb-login-curves-color, #f5c1bc);
				--curves-display: var(--umb-login-curves-display, inline);
			}

			#layout {
				display: flex;
				justify-content: center;
				padding: 32px 0 32px 32px;
				width: 100vw;
				max-width: 1920px;
				height: 100vh;
				box-sizing: border-box;
			}

			#graphic {
				position: relative;
				width: 100%;
				height: 100%;
				background: var(--umb-login-image, var(--image));
				border-radius: var(--umb-login-image-border-radius, 38px);
				position: relative;
				overflow: hidden;
				color: var(--curves-color);
			}

			#graphic svg {
				position: absolute;
				width: 45%;
				height: fit-content;
				display: var(--curves-display);
			}

			#curve-top {
				top: -9%;
				right: -9%;
			}

			#curve-bottom {
				bottom: -0.5%;
				left: -0.1%;
			}

			#content-container {
				background: var(--umb-login-content-background, none);
				display: var(--umb-login-content-display, flex);
				width: var(--umb-login-content-width, 100%);
				height: var(--umb-login-content-height, 100%);
				overflow: auto;
				border-radius: var(--umb-login-content-border-radius, 0);
				padding: 16px;
				margin: auto;
			}

			#content {
				max-width: 360px;
				margin: auto;
				width: 100%;
			}

			#logo-on-background {
				display: none;
			}

			#logo-on-image,
			#logo-on-background {
				position: absolute;
				top: 24px;
				left: 24px;
				height: 55px;
			}

			#header {
				text-align: center;
				display: flex;
				flex-direction: column;
				gap: var(--uui-size-space-5);
			}

			#greeting {
				color: var(--umb-login-greeting-color, var(--uui-color-interactive-emphasis));
				text-align: center;
				font-weight: 400;
				font-size: var(--umb-login-header-font-size-large, 4rem);
				margin: 0 0 var(--uui-size-layout-1);
				line-height: 1.2;
			}

			#providers {
				display: flex;
				flex-direction: column;
				gap: var(--uui-size-space-5);
			}

			#loader {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			@media (max-width: 900px) {
				#graphic {
					display: none;
				}
				#logo-on-background {
					display: block;
				}
			}
		`,
    ]; }
};
__decorate([
    property({ attribute: false })
], UmbAuthViewElement.prototype, "userLoginState", void 0);
__decorate([
    property({ attribute: false })
], UmbAuthViewElement.prototype, "onSuccess", void 0);
__decorate([
    state()
], UmbAuthViewElement.prototype, "_error", void 0);
__decorate([
    state()
], UmbAuthViewElement.prototype, "_serverUrl", void 0);
__decorate([
    state()
], UmbAuthViewElement.prototype, "_loading", void 0);
__decorate([
    state()
], UmbAuthViewElement.prototype, "_allowLocalLogin", void 0);
UmbAuthViewElement = __decorate([
    customElement('umb-auth-view')
], UmbAuthViewElement);
export { UmbAuthViewElement };
export default UmbAuthViewElement;
