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 { UmbCurrentUserRepository } from '../../repository/index.js';
import { UMB_NOTIFICATION_CONTEXT } from '../../../../core/notification/index.js';
import { css, customElement, html, query, state } from '../../../../../external/lit/index.js';
import { UmbModalBaseElement } from '../../../../core/modal/index.js';
import { UmbTextStyles } from '../../../../core/style/index.js';
import { isApiError } from '../../../../core/resources/index.js';
let UmbCurrentUserMfaDisableModalElement = class UmbCurrentUserMfaDisableModalElement extends UmbModalBaseElement {
    #currentUserRepository = new UmbCurrentUserRepository(this);
    #notificationContext;
    constructor() {
        super();
        this.consumeContext(UMB_NOTIFICATION_CONTEXT, (context) => {
            this.#notificationContext = context;
        });
    }
    render() {
        if (!this.data) {
            return html `<uui-loader-bar></uui-loader-bar>`;
        }
        return html `
			<uui-form>
				<form id="authForm" name="authForm" @submit=${this.#onSubmit} novalidate>
					<umb-body-layout headline=${this.data.displayName}>
						<div id="main">
							<p>
								<umb-localize key="user_2faDisableText">
									If you wish to disable this two-factor provider, then you must enter the code shown on your
									authentication device:
								</umb-localize>
							</p>

							<uui-form-layout-item class="text-center">
								<uui-label for="code" slot="label" required>
									<umb-localize key="user_2faCodeInput"></umb-localize>
								</uui-label>
								<uui-input
									id="code"
									name="code"
									type="text"
									inputmode="numeric"
									autocomplete="one-time-code"
									required
									required-message=${this.localize.term('general_required')}
									label=${this.localize.term('user_2faCodeInputHelp')}
									placeholder=${this.localize.term('user_2faCodeInputHelp')}></uui-input>
							</uui-form-layout-item>
						</div>
						<div slot="actions">
							<uui-button
								type="button"
								look="secondary"
								.label=${this.localize.term('general_close')}
								@click=${this.#close}>
								${this.localize.term('general_close')}
							</uui-button>
							<uui-button
								.state=${this._buttonState}
								type="submit"
								look="primary"
								.label=${this.localize.term('buttons_save')}>
								${this.localize.term('general_submit')}
							</uui-button>
						</div>
					</umb-body-layout>
				</form>
			</uui-form>
		`;
    }
    async #onSubmit(e) {
        e.preventDefault();
        this._codeInput.setCustomValidity('');
        if (!this.data)
            throw new Error('No data provided');
        const form = e.target;
        if (!form.checkValidity())
            return;
        const formData = new FormData(form);
        const code = formData.get('code');
        if (!code)
            return;
        this._buttonState = 'waiting';
        const { error } = await this.#currentUserRepository.disableMfaProvider(this.data.providerName, code);
        if (!error) {
            this.#peek(this.localize.term('user_2faProviderIsDisabledMsg', this.data.displayName ?? this.data.providerName));
            this.modalContext?.submit();
            this._buttonState = 'success';
        }
        else {
            this._buttonState = 'failed';
            if (isApiError(error)) {
                if (error.body.operationStatus === 'InvalidCode') {
                    this._codeInput.setCustomValidity(this.localize.term('user_2faInvalidCode'));
                    this._codeInput.focus();
                }
                else {
                    this.#peek(this.localize.term('user_2faProviderIsNotDisabledMsg', this.data.displayName ?? this.data.providerName), 'warning');
                }
            }
            else {
                this.#peek(error.message, 'warning');
            }
        }
    }
    async #close() {
        this.modalContext?.submit();
    }
    async #peek(message, color) {
        this.#notificationContext?.peek(color ?? 'positive', {
            data: {
                headline: this.localize.term('member_2fa'),
                message,
            },
        });
    }
    static { this.styles = [
        UmbTextStyles,
        css `
			#authForm {
				height: 100%;
			}

			#code {
				width: 100%;
				max-width: 300px;
			}

			.text-center {
				text-align: center;
			}
		`,
    ]; }
};
__decorate([
    state()
], UmbCurrentUserMfaDisableModalElement.prototype, "_buttonState", void 0);
__decorate([
    query('#code')
], UmbCurrentUserMfaDisableModalElement.prototype, "_codeInput", void 0);
UmbCurrentUserMfaDisableModalElement = __decorate([
    customElement('umb-current-user-mfa-disable-modal')
], UmbCurrentUserMfaDisableModalElement);
export { UmbCurrentUserMfaDisableModalElement };
export default UmbCurrentUserMfaDisableModalElement;
