import { Component, ElementRef, EventEmitter, Input, Output } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { 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/legacy-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.verificationValueChanges = new EventEmitter();
        this.verificationComplete = new EventEmitter();
        this.codeForm = new FormControl({ value: undefined, disabled: false }, [Validators.required]);
        this.loading$ = new BehaviorSubject(false);
        this.error$ = new BehaviorSubject(null);
    }
    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: () => {
                this.verified = true;
                this.loading$.next(false);
                this.verificationComplete.next(this.verificationValue);
            },
            error: (response) => {
                this.codeForm.reset();
                this.error$.next(typeof response.error === 'string' ? response.error : true);
                this.loading$.next(false);
            },
        });
    }
    retryOTP() {
        this._overlay.createModal(RetryVerificationComponent, {
            title: 'agreement.verification.retry',
            init: (modal) => {
                modal.verificationType = this.verificationType;
                modal.retryVerification = this.retryVerification;
                modal.verificationValueChanges.pipe(first()).subscribe((verificationValue) => {
                    this.verificationValue = verificationValue;
                    this.verificationValueChanges.next(this.verificationValue);
                    this.error$.next(null);
                });
            },
        }, this._elementRef);
    }
}
OtpVerificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: OtpVerificationComponent, deps: [{ token: i1.OverlayService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
OtpVerificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: OtpVerificationComponent, selector: "ax-otp-verification", inputs: { verified: "verified", verificationValue: "verificationValue", verificationType: "verificationType", verification: "verification", retryVerification: "retryVerification" }, outputs: { verificationValueChanges: "verificationValueChanges", verificationComplete: "verificationComplete" }, ngImport: i0, template: "<ng-container *ngIf=\"!verified\">\n  <ng-container\n    *ngIf=\"\n      (error$ | async) === null ||\n      (error$ | async) === 'INVALID_VERIFICATION_CODE' ||\n      (error$ | async) === true\n    \"\n  >\n    <mat-form-field class=\"otp-form-field c-input\" 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()\"\n    >\n      {{ 'label.verify' | translate }}\n    </ax-button>\n  </ng-container>\n\n  <div class=\"resend\" *ngIf=\"(error$ | async) === null\">\n    <span>{{ 'agreement.verification.code.resend' | translate }}</span>\n    <a axButton class=\"resend-link\" (click)=\"retryOTP()\">{{\n      'property.verification.modal.mobile.resend' | translate\n    }}</a>\n  </div>\n\n  <div class=\"error-message\" *ngIf=\"(error$ | async) !== null\">\n    <ng-container [ngSwitch]=\"error$ | async\">\n      <ng-container *ngSwitchCase=\"'INVALID_VERIFICATION_CODE'\">\n        <span class=\"error\">{{ 'agreement.verification.code.error.incorrect' | translate }}</span>\n        <span>{{ 'label.or' | translate }}</span>\n      </ng-container>\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\" *ngSwitchDefault>{{\n        'error.SOMETHING_WENT_WRONG.message' | translate\n      }}</span>\n    </ng-container>\n    <button axButton filled class=\"resend-button\" (click)=\"retryOTP()\">\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: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}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" }, { kind: "component", type: i5.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLegacyLabel, 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: "15.1.5", ngImport: i0, type: OtpVerificationComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-otp-verification', template: "<ng-container *ngIf=\"!verified\">\n  <ng-container\n    *ngIf=\"\n      (error$ | async) === null ||\n      (error$ | async) === 'INVALID_VERIFICATION_CODE' ||\n      (error$ | async) === true\n    \"\n  >\n    <mat-form-field class=\"otp-form-field c-input\" 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()\"\n    >\n      {{ 'label.verify' | translate }}\n    </ax-button>\n  </ng-container>\n\n  <div class=\"resend\" *ngIf=\"(error$ | async) === null\">\n    <span>{{ 'agreement.verification.code.resend' | translate }}</span>\n    <a axButton class=\"resend-link\" (click)=\"retryOTP()\">{{\n      'property.verification.modal.mobile.resend' | translate\n    }}</a>\n  </div>\n\n  <div class=\"error-message\" *ngIf=\"(error$ | async) !== null\">\n    <ng-container [ngSwitch]=\"error$ | async\">\n      <ng-container *ngSwitchCase=\"'INVALID_VERIFICATION_CODE'\">\n        <span class=\"error\">{{ 'agreement.verification.code.error.incorrect' | translate }}</span>\n        <span>{{ 'label.or' | translate }}</span>\n      </ng-container>\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\" *ngSwitchDefault>{{\n        'error.SOMETHING_WENT_WRONG.message' | translate\n      }}</span>\n    </ng-container>\n    <button axButton filled class=\"resend-button\" (click)=\"retryOTP()\">\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: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}a.ax-button.resend-link{text-transform:none;background-color:transparent;text-decoration:underline}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.OverlayService }, { type: i0.ElementRef }]; }, propDecorators: { verified: [{
                type: Input
            }], verificationValue: [{
                type: Input
            }], verificationType: [{
                type: Input
            }], verification: [{
                type: Input
            }], retryVerification: [{
                type: Input
            }], verificationValueChanges: [{
                type: Output
            }], verificationComplete: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 