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_MEMBER_WORKSPACE_CONTEXT } from '../../member-workspace.context-token.js';
import { TimeFormatOptions } from './utils.js';
import { UmbTextStyles } from '../../../../../../core/style/index.js';
import { css, html, customElement, state, when } from '../../../../../../../external/lit/index.js';
import { UmbLitElement } from '../../../../../../core/lit-element/index.js';
import './member-workspace-view-member-info.element.js';
import { UMB_CURRENT_USER_CONTEXT } from '../../../../../../user/current-user/index.js';
import { umbBindToValidation } from '../../../../../../core/validation/index.js';
let UmbMemberWorkspaceViewMemberElement = class UmbMemberWorkspaceViewMemberElement extends UmbLitElement {
    constructor() {
        super();
        this._showChangePasswordForm = false;
        this._newPasswordError = '';
        this._isNew = true;
        this._hasAccessToSensitiveData = false;
        this.#onPasswordUpdate = () => {
            const newPassword = this.shadowRoot?.querySelector('uui-input[name="newPassword"]')?.value;
            const confirmPassword = this.shadowRoot?.querySelector('uui-input[name="confirmPassword"]')?.value;
            if (newPassword !== confirmPassword) {
                this._newPasswordError = this.localize.term('user_passwordMismatch');
                return;
            }
            this._newPasswordError = '';
            this._workspaceContext?.set('newPassword', newPassword);
        };
        this.#onNewPasswordCancel = () => {
            this._workspaceContext?.set('newPassword', '');
            this._showChangePasswordForm = false;
            this._newPasswordError = '';
        };
        this.consumeContext(UMB_MEMBER_WORKSPACE_CONTEXT, (context) => {
            this._workspaceContext = context;
            this.observe(this._workspaceContext?.isNew, (isNew) => {
                this._isNew = !!isNew;
            });
        });
        this.consumeContext(UMB_CURRENT_USER_CONTEXT, (context) => {
            this.observe(context?.hasAccessToSensitiveData, (hasAccessToSensitiveData) => {
                this._hasAccessToSensitiveData = hasAccessToSensitiveData === true;
            });
        });
    }
    #onChange(propertyName, value) {
        if (!this._workspaceContext)
            return;
        this._workspaceContext.set(propertyName, value);
    }
    #onGroupsUpdated(event) {
        const uniques = event.target.selection;
        this._workspaceContext?.set('groups', uniques);
    }
    #onPasswordUpdate;
    #onNewPasswordCancel;
    #renderPasswordInput() {
        if (this._isNew && this._workspaceContext) {
            return html `
				<umb-property-layout label=${this.localize.term('user_password')} mandatory>
					<uui-input
						slot="editor"
						name="newPassword"
						data-mark="input:password"
						label=${this.localize.term('user_passwordEnterNew')}
						type="password"
						@input=${() => this.#onPasswordUpdate()}
						value=${this._workspaceContext.newPassword}
						required
						${umbBindToValidation(this, "$.values[?(@.alias == 'password' && @.culture == null && @.segment == null)].value", this._workspaceContext.newPassword)}></uui-input>
				</umb-property-layout>

				<umb-property-layout label=${this.localize.term('user_confirmPassword')} mandatory>
					<uui-input
						slot="editor"
						name="confirmPassword"
						data-mark="input:confirm-password"
						label=${this.localize.term('user_confirmPassword')}
						type="password"
						value=${this._workspaceContext.newPassword}
						@input=${() => this.#onPasswordUpdate()}></uui-input>
				</umb-property-layout>

				${when(this._newPasswordError, () => html `<p class="validation-error">${this._newPasswordError}</p>`)}
			`;
        }
        return html `
			<umb-property-layout label=${this.localize.term('general_changePassword')}>
				${when(this._showChangePasswordForm, () => html `
						<div slot="editor">
							<umb-property-layout label=${this.localize.term('user_newPassword')} mandatory>
								<uui-input
									slot="editor"
									name="newPassword"
									data-mark="input:new-password"
									label=${this.localize.term('user_newPassword')}
									type="password"
									@input=${() => this.#onPasswordUpdate()}></uui-input>
							</umb-property-layout>
							<umb-property-layout label=${this.localize.term('user_confirmNewPassword')} mandatory>
								<uui-input
									slot="editor"
									name="confirmPassword"
									data-mark="input:confirm-new-password"
									label=${this.localize.term('user_confirmNewPassword')}
									type="password"
									@input=${() => this.#onPasswordUpdate()}></uui-input>
							</umb-property-layout>
							${when(this._newPasswordError, () => html `<p class="validation-error">${this._newPasswordError}</p>`)}
							<uui-button
								label=${this.localize.term('general_cancel')}
								data-mark="action:cancel"
								look="secondary"
								@click=${this.#onNewPasswordCancel}></uui-button>
						</div>
					`, () => html `
						<uui-button
							slot="editor"
							data-mark="action:change-password"
							label=${this.localize.term('general_changePassword')}
							look="secondary"
							@click=${() => (this._showChangePasswordForm = true)}></uui-button>
					`)}
			</umb-property-layout>
		`;
    }
    #renderLeftColumn() {
        if (!this._workspaceContext)
            return;
        return html `
			<div id="left-column">
				<uui-box>
					<umb-property-layout label=${this.localize.term('general_username')} mandatory>
						<uui-input
							slot="editor"
							name="login"
							data-mark="input:username"
							label=${this.localize.term('general_username')}
							value=${this._workspaceContext.username}
							${umbBindToValidation(this, "$.values[?(@.alias == 'username' && @.culture == null && @.segment == null)].value", this._workspaceContext.username)}
							required
							required-message=${this.localize.term('user_loginnameRequired')}
							@input=${(e) => this.#onChange('username', e.target.value)}></uui-input>
					</umb-property-layout>

					<umb-property-layout label=${this.localize.term('general_email')} mandatory>
						<uui-input
							slot="editor"
							name="email"
							data-mark="input:email"
							label=${this.localize.term('general_email')}
							value=${this._workspaceContext.email}
							${umbBindToValidation(this, "$.values[?(@.alias == 'email' && @.culture == null && @.segment == null)].value", this._workspaceContext.email)}
							required
							required-message=${this.localize.term('user_emailRequired')}
							@input=${(e) => this.#onChange('email', e.target.value)}></uui-input>
					</umb-property-layout>

					${this.#renderPasswordInput()}

					<umb-property-layout label=${this.localize.term('content_membergroup')}>
						<umb-input-member-group
							slot="editor"
							data-mark="input-member-group:member-group"
							@change=${this.#onGroupsUpdated}
							.selection=${this._workspaceContext.memberGroups}></umb-input-member-group>
					</umb-property-layout>

					${when(this._hasAccessToSensitiveData, () => html `
							<umb-property-layout label=${this.localize.term('user_stateApproved')}>
								<uui-toggle
									slot="editor"
									data-mark="toggle:approved"
									.checked=${this._workspaceContext.isApproved}
									@change=${(e) => this.#onChange('isApproved', e.target.checked)}>
								</uui-toggle>
							</umb-property-layout>

							<umb-property-layout label=${this.localize.term('user_stateLockedOut')}>
								<uui-toggle
									slot="editor"
									data-mark="toggle:locked-out"
									?disabled=${this._isNew || !this._workspaceContext.isLockedOut}
									.checked=${this._workspaceContext.isLockedOut}
									@change=${(e) => this.#onChange('isLockedOut', e.target.checked)}>
								</uui-toggle>
							</umb-property-layout>
						`)}
					<umb-property-layout label=${this.localize.term('member_2fa')}>
						<uui-toggle
							slot="editor"
							data-mark="toggle:two-factor"
							?disabled=${this._isNew || !this._workspaceContext.isTwoFactorEnabled}
							.checked=${this._workspaceContext.isTwoFactorEnabled}
							@change=${(e) => this.#onChange('isTwoFactorEnabled', e.target.checked)}>
						</uui-toggle>
					</umb-property-layout>
				</uui-box>

				<div class="container">
					<umb-extension-slot id="workspace-info-apps" type="workspaceInfoApp"></umb-extension-slot>
				</div>
			</div>
		`;
    }
    #renderRightColumn() {
        if (!this._workspaceContext)
            return;
        return html `
			<div id="right-column">
				<uui-box>
					<umb-stack look="compact">
						<div>
							<h4><umb-localize key="user_failedPasswordAttempts">Failed login attempts</umb-localize></h4>
							<span>${this._workspaceContext.failedPasswordAttempts}</span>
						</div>
						<div>
							<h4><umb-localize key="user_lastLockoutDate">Last lockout date</umb-localize></h4>
							<span>
								${this._workspaceContext.lastLockOutDate
            ? this.localize.date(this._workspaceContext.lastLockOutDate, TimeFormatOptions)
            : this.localize.term('general_never')}
							</span>
						</div>
						<div>
							<h4><umb-localize key="user_lastLogin">Last login</umb-localize></h4>
							<span>
								${this._workspaceContext.lastLoginDate
            ? this.localize.date(this._workspaceContext.lastLoginDate, TimeFormatOptions)
            : this.localize.term('general_never')}
							</span>
						</div>
						<div>
							<h4><umb-localize key="user_passwordChangedGeneric">Password changed</umb-localize></h4>
							<span>
								${this._workspaceContext.lastPasswordChangeDate
            ? this.localize.date(this._workspaceContext.lastPasswordChangeDate, TimeFormatOptions)
            : this.localize.term('general_never')}
							</span>
						</div>
					</umb-stack>
				</uui-box>

				<uui-box>
					<umb-member-workspace-view-member-info></umb-member-workspace-view-member-info>
				</uui-box>
			</div>
		`;
    }
    render() {
        return html `
			<umb-body-layout header-fit-height>
				<div id="main">${this.#renderLeftColumn()} ${this.#renderRightColumn()}</div>
			</umb-body-layout>
		`;
    }
    static { this.styles = [
        UmbTextStyles,
        css `
			uui-input {
				width: 100%;
			}
			#main {
				display: flex;
				flex-wrap: wrap;
				gap: var(--uui-size-space-4);
			}
			#left-column {
				/* Is there a way to make the wrapped right column grow only when wrapped? */
				flex: 9999 1 500px;
				display: flex;
				flex-direction: column;
				gap: var(--uui-size-space-4);
			}
			#right-column {
				flex: 1 1 350px;
				display: flex;
				flex-direction: column;
				gap: var(--uui-size-space-4);
			}
			uui-box {
				height: fit-content;
			}
			umb-property-layout {
				padding-block: var(--uui-size-space-4);
			}
			umb-property-layout:first-child {
				padding-top: 0;
			}
			umb-property-layout:last-child {
				padding-bottom: 0;
			}
			.validation-error {
				margin-top: 0;
				color: var(--uui-color-danger);
			}

			h4 {
				margin: 0;
			}
		`,
    ]; }
};
__decorate([
    state()
], UmbMemberWorkspaceViewMemberElement.prototype, "_showChangePasswordForm", void 0);
__decorate([
    state()
], UmbMemberWorkspaceViewMemberElement.prototype, "_newPasswordError", void 0);
__decorate([
    state()
], UmbMemberWorkspaceViewMemberElement.prototype, "_isNew", void 0);
__decorate([
    state()
], UmbMemberWorkspaceViewMemberElement.prototype, "_hasAccessToSensitiveData", void 0);
UmbMemberWorkspaceViewMemberElement = __decorate([
    customElement('umb-member-workspace-view-member')
], UmbMemberWorkspaceViewMemberElement);
export { UmbMemberWorkspaceViewMemberElement };
export default UmbMemberWorkspaceViewMemberElement;
