import { Component, ElementRef, EventEmitter, Input, Output } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { ModalSize, OverlayService } from '@aztrix/components/overlay';
import { BehaviorSubject, first } from 'rxjs';
import { RetryVerificationComponent } from './retry-verification/retry-verification.component';
import * as i0 from "@angular/core";
import * as i1 from "@aztrix/components/overlay";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
import * as i4 from "@aztrix/components/button";
import * as i5 from "@angular/material/form-field";
import * as i6 from "./otp-input/otp-input.component";
import * as i7 from "@aztrix/helpers";
export class OtpVerificationComponent {
    constructor(_overlay, _elementRef) {
        this._overlay = _overlay;
        this._elementRef = _elementRef;
        this.verified = false;
        this.verificationValue = '';
        this.canChangeValue = true;
        this.verificationValueChanges = new EventEmitter();
        this.verificationComplete = new EventEmitter();
        this.codeForm = new FormControl({ value: null, disabled: false }, [Validators.required]);
        this.loading$ = new BehaviorSubject(false);
        this.error$ = new BehaviorSubject(null);
        this.startDate = Date.now();
    }
    ngOnInit() {
        if (this.verificationCode && !this.verified && this.verificationValue !== '') {
            this.codeForm.setValue(this.verificationCode);
            this.verifyOTP();
        }
    }
    verifyOTP() {
        if (this.codeForm?.errors) {
            return;
        }
        this.loading$.next(true);
        this.error$.next(null);
        this.verification(this.codeForm.value, this.verificationValue || '')
            .pipe(first())
            .subscribe({
            next: (response) => {
                localStorage.removeItem('endTime');
                this.verified = true;
                this.loading$.next(false);
                this.verificationComplete.next(response);
            },
            error: (response) => {
                this.codeForm.reset();
                if (response.error === 'TOO_MANY_VERIFICATION_ATTEMPTS' ||
                    response.error === 'VERIFICATION_CODE_EXPIRED') {
                    localStorage.setItem('endTime', Date.now().toString());
                }
                this.error$.next(typeof response.error === 'string' ? response.error : true);
                this.loading$.next(false);
            },
        });
    }
    retryOTP() {
        this._overlay.createModal(this._elementRef, RetryVerificationComponent, {
            title: 'agreement.verification.send',
            modalSize: ModalSize.EXTRA_SMALL,
            init: (modal) => {
                modal.startDate = this.startDate;
                modal.canChangeValue = this.canChangeValue;
                modal.verificationType = this.verificationType;
                modal.retryVerification = this.retryVerification;
                modal.form.setValue(this.verificationValue || '');
                modal.verificationValueChanges.pipe(first()).subscribe((verificationValue) => {
                    this.verificationValue = verificationValue;
                    this.verificationValueChanges.next(this.verificationValue);
                    this.error$.next(null);
                });
            },
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OtpVerificationComponent, deps: [{ token: i1.OverlayService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OtpVerificationComponent, selector: "ax-otp-verification", inputs: { verified: "verified", verificationValue: "verificationValue", verificationType: "verificationType", canChangeValue: "canChangeValue", verificationCode: "verificationCode", verification: "verification", retryVerification: "retryVerification" }, outputs: { verificationValueChanges: "verificationValueChanges", verificationComplete: "verificationComplete" }, ngImport: i0, template: "<ng-container *ngIf=\"!verified && verificationValue !== ''\">\n  <ng-container\n    *ngIf=\"\n      (error$ | async) === null ||\n      (error$ | async) === 'INVALID_VERIFICATION_CODE' ||\n      (error$ | async) === 'INVALID_TOKEN' ||\n      (error$ | async) === true\n    \"\n  >\n    <mat-form-field class=\"otp-form-field c-input remove-subtext\" appearance=\"outline\">\n      <mat-label>{{ 'label.enter.code' | translate }}</mat-label>\n      <ax-otp-input matInput [formControl]=\"codeForm\"></ax-otp-input>\n    </mat-form-field>\n\n    <ng-content></ng-content>\n\n    <ax-button\n      class=\"verify\"\n      filled\n      color=\"accent\"\n      [loading]=\"loading$ | async\"\n      (click)=\"verifyOTP(); $event.preventDefault()\"\n    >\n      {{ 'label.verify' | translate }}\n    </ax-button>\n\n    <div class=\"resend\">\n      <a axButton class=\"resend-link\" (click)=\"retryOTP()\">\n        <span>{{ 'agreement.verification.code.resend' | translate }}</span>\n      </a>\n    </div>\n  </ng-container>\n\n  <div class=\"error-message\" *ngIf=\"(error$ | async) !== null\">\n    <ng-container [ngSwitch]=\"error$ | async\">\n      <span class=\"error\" *ngSwitchCase=\"'INVALID_VERIFICATION_CODE'\">{{\n        'agreement.verification.code.error.incorrect' | translate\n      }}</span>\n      <span class=\"error\" *ngSwitchCase=\"'INVALID_TOKEN'\">{{\n        'agreement.verification.code.error.incorrect' | translate\n      }}</span>\n      <span class=\"error\" *ngSwitchCase=\"'TOO_MANY_VERIFICATION_ATTEMPTS'\">{{\n        'agreement.verification.code.error.too-many-attempts' | translate\n      }}</span>\n      <span class=\"error\" *ngSwitchCase=\"'VERIFICATION_CODE_EXPIRED'\">{{\n        'agreement.verification.code.error.expired' | translate\n      }}</span>\n      <span class=\"error\" *ngSwitchCase=\"'LOGIN_NOT_REGISTERED'\">{{\n        'error.login.invalid.login' | translate\n      }}</span>\n      <span class=\"error\" *ngSwitchDefault>{{\n        'error.SOMETHING_WENT_WRONG.message' | translate\n      }}</span>\n    </ng-container>\n    <button\n      axButton\n      filled\n      class=\"resend-button\"\n      *ngIf=\"\n        (error$ | async) === 'TOO_MANY_VERIFICATION_ATTEMPTS' ||\n        (error$ | async) === 'VERIFICATION_CODE_EXPIRED'\n      \"\n      (click)=\"retryOTP(); $event.preventDefault()\"\n    >\n      {{ 'property.verification.modal.mobile.resend' | translate }}\n    </button>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch;padding-top:1rem}.error-message{padding:0 1rem 1rem;display:flex;flex-flow:column;align-items:center;justify-content:center;gap:1rem}.error{color:var(--warn-color-500);padding:0 .75rem}.resend-button{margin:0 .75rem}.verify ::ng-deep .ax-button{width:100%}.resend{display:flex;align-items:center;flex-direction:column;text-align:center;padding:.25rem 1rem;max-width:300px;margin:0 auto}a.ax-button.resend-link{text-transform:none;background-color:transparent;text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "component", type: i4.ButtonComponent, selector: "ax-button", inputs: ["url", "ariaLabel", "target"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "component", type: i6.OtpInputComponent, selector: "ax-otp-input", inputs: ["aria-describedby", "placeholder", "required", "disabled", "value"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OtpVerificationComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-otp-verification', template: "<ng-container *ngIf=\"!verified && verificationValue !== ''\">\n  <ng-container\n    *ngIf=\"\n      (error$ | async) === null ||\n      (error$ | async) === 'INVALID_VERIFICATION_CODE' ||\n      (error$ | async) === 'INVALID_TOKEN' ||\n      (error$ | async) === true\n    \"\n  >\n    <mat-form-field class=\"otp-form-field c-input remove-subtext\" appearance=\"outline\">\n      <mat-label>{{ 'label.enter.code' | translate }}</mat-label>\n      <ax-otp-input matInput [formControl]=\"codeForm\"></ax-otp-input>\n    </mat-form-field>\n\n    <ng-content></ng-content>\n\n    <ax-button\n      class=\"verify\"\n      filled\n      color=\"accent\"\n      [loading]=\"loading$ | async\"\n      (click)=\"verifyOTP(); $event.preventDefault()\"\n    >\n      {{ 'label.verify' | translate }}\n    </ax-button>\n\n    <div class=\"resend\">\n      <a axButton class=\"resend-link\" (click)=\"retryOTP()\">\n        <span>{{ 'agreement.verification.code.resend' | translate }}</span>\n      </a>\n    </div>\n  </ng-container>\n\n  <div class=\"error-message\" *ngIf=\"(error$ | async) !== null\">\n    <ng-container [ngSwitch]=\"error$ | async\">\n      <span class=\"error\" *ngSwitchCase=\"'INVALID_VERIFICATION_CODE'\">{{\n        'agreement.verification.code.error.incorrect' | translate\n      }}</span>\n      <span class=\"error\" *ngSwitchCase=\"'INVALID_TOKEN'\">{{\n        'agreement.verification.code.error.incorrect' | translate\n      }}</span>\n      <span class=\"error\" *ngSwitchCase=\"'TOO_MANY_VERIFICATION_ATTEMPTS'\">{{\n        'agreement.verification.code.error.too-many-attempts' | translate\n      }}</span>\n      <span class=\"error\" *ngSwitchCase=\"'VERIFICATION_CODE_EXPIRED'\">{{\n        'agreement.verification.code.error.expired' | translate\n      }}</span>\n      <span class=\"error\" *ngSwitchCase=\"'LOGIN_NOT_REGISTERED'\">{{\n        'error.login.invalid.login' | translate\n      }}</span>\n      <span class=\"error\" *ngSwitchDefault>{{\n        'error.SOMETHING_WENT_WRONG.message' | translate\n      }}</span>\n    </ng-container>\n    <button\n      axButton\n      filled\n      class=\"resend-button\"\n      *ngIf=\"\n        (error$ | async) === 'TOO_MANY_VERIFICATION_ATTEMPTS' ||\n        (error$ | async) === 'VERIFICATION_CODE_EXPIRED'\n      \"\n      (click)=\"retryOTP(); $event.preventDefault()\"\n    >\n      {{ 'property.verification.modal.mobile.resend' | translate }}\n    </button>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch;padding-top:1rem}.error-message{padding:0 1rem 1rem;display:flex;flex-flow:column;align-items:center;justify-content:center;gap:1rem}.error{color:var(--warn-color-500);padding:0 .75rem}.resend-button{margin:0 .75rem}.verify ::ng-deep .ax-button{width:100%}.resend{display:flex;align-items:center;flex-direction:column;text-align:center;padding:.25rem 1rem;max-width:300px;margin:0 auto}a.ax-button.resend-link{text-transform:none;background-color:transparent;text-decoration:underline}\n"] }]
        }], ctorParameters: () => [{ type: i1.OverlayService }, { type: i0.ElementRef }], propDecorators: { verified: [{
                type: Input
            }], verificationValue: [{
                type: Input
            }], verificationType: [{
                type: Input
            }], canChangeValue: [{
                type: Input
            }], verificationCode: [{
                type: Input
            }], verification: [{
                type: Input
            }], retryVerification: [{
                type: Input
            }], verificationValueChanges: [{
                type: Output
            }], verificationComplete: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 