import { ChangeDetectorRef, Component, EventEmitter, Input, Output, } from '@angular/core';
import { OverlayService } from '@aztrix/components/overlay';
import { CustomValidators } from '@aztrix/helpers';
import { FormControl } from '@ngneat/reactive-forms';
import { first } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "@aztrix/components/overlay";
import * as i2 from "@angular/common";
import * as i3 from "@aztrix/components/button";
import * as i4 from "@aztrix/components/value-edit";
import * as i5 from "@aztrix/components/login-value-form-error";
import * as i6 from "@aztrix/helpers";
import * as i7 from "@aztrix/translate";
import * as i8 from "../seconds-from-now.pipe";
export class RetryVerificationComponent {
    set endTime(time) {
        localStorage.setItem('endTime', time.toString());
    }
    get endTime() {
        return +(localStorage.getItem('endTime') || '');
    }
    constructor(_overlay, _changeDetector) {
        this._overlay = _overlay;
        this._changeDetector = _changeDetector;
        this.form = new FormControl('', [CustomValidators.validateLoginValue()]);
        this.verificationValueChanges = new EventEmitter();
        this._mobileForm = new FormControl();
        this._emailForm = new FormControl();
    }
    ngOnInit() {
        this._mobileForm.valueChanges.subscribe((value) => {
            this.form.setValue(value);
        });
        this._emailForm.valueChanges.subscribe((value) => {
            this.form.setValue(value);
        });
        const currentEndTime = +(localStorage.getItem('endTime') || '');
        if (currentEndTime && currentEndTime <= 0) {
            this.endTime = this.startDate + 120 * 1000;
        }
        this.startTimer();
    }
    ngOnDestroy() {
        clearInterval(this._interval);
    }
    startTimer() {
        this._interval = setInterval(() => {
            this._changeDetector.detectChanges();
        }, 1000);
    }
    resendVerification() {
        this.endTime = Date.now() + 120 * 1000;
        this.retryVerification(this.form.value)
            .pipe(first())
            .subscribe(() => {
            this.verificationValueChanges.next(this.form.value);
            this._overlay.closeModal();
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RetryVerificationComponent, deps: [{ token: i1.OverlayService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: RetryVerificationComponent, selector: "ax-retry-verification", inputs: { form: "form", startDate: "startDate", canChangeValue: "canChangeValue", verificationType: "verificationType", retryVerification: "retryVerification" }, outputs: { verificationValueChanges: "verificationValueChanges" }, ngImport: i0, template: "@if ((endTime | secondsFromNow) > 0) {\n  <p>\n    {{ 'agreement.verification.retry.message' | translate }}\n  </p>\n  <p>\n    {{\n      'agreement.verification.retry.message.time' | translate: {seconds: endTime | secondsFromNow}\n    }}\n  </p>\n} @else if (canChangeValue) {\n  <p>{{ 'agreement.verification.retry.message.1' | translate }}</p>\n  <ul>\n    <li>{{ 'agreement.verification.retry.message.1.option1' | translate }}</li>\n    <li>{{ 'agreement.verification.retry.message.1.option2' | translate }}</li>\n  </ul>\n\n  <div class=\"retry\">\n    <ax-value-edit\n      [form]=\"form\"\n      [autofocus]=\"false\"\n      [required]=\"true\"\n      [hint]=\"\n        'proposal.agreement.verification.property'\n          | translate: {propertyType: verificationType | propertyTypeLabel | lowercase}\n      \"\n      [type]=\"\n        verificationType.includes('MOBILE')\n          ? 'PHONE'\n          : verificationType === 'EMAIL'\n            ? 'EMAIL'\n            : 'PHONE'\n      \"\n      [label]=\"verificationType | propertyTypeLabel\"\n      [errorsTemplate]=\"errorsTemplate\"\n    ></ax-value-edit>\n    <button\n      [disabled]=\"form.invalid\"\n      axButton\n      filled\n      fullWidth\n      (click)=\"resendVerification()\"\n      color=\"primary\"\n    >\n      {{ 'agreement.verification.retry' | translate }}\n    </button>\n  </div>\n\n  <ng-template #errorsTemplate>\n    <ax-login-value-form-error\n      *ngIf=\"form.touched\"\n      [form]=\"form\"\n      [propertyType]=\"verificationType\"\n    ></ax-login-value-form-error>\n  </ng-template>\n\n  <p>{{ 'agreement.verification.retry.message.2' | translate }}</p>\n} @else {\n  <p>{{ 'agreement.verification.retry.message.1' | translate }}</p>\n  <ul>\n    <li>{{ 'agreement.verification.retry.message.1.option1' | translate }}</li>\n    <li>{{ 'agreement.verification.retry.message.1.option2' | translate }}</li>\n  </ul>\n  <div class=\"retry\">\n    <button\n      axButton\n      filled\n      fullWidth\n      color=\"primary\"\n      [disabled]=\"(endTime | secondsFromNow) > 0\"\n      (click)=\"resendVerification()\"\n    >\n      {{ 'agreement.verification.retry' | translate }}\n    </button>\n  </div>\n\n  <p>{{ 'agreement.verification.retry.message.2' | translate }}</p>\n}\n", styles: [":host{padding:1rem;display:block}:host p{margin:0}.retry{padding:0 0 1rem}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "component", type: i4.ValueEditComponent, selector: "ax-value-edit", inputs: ["type", "numberConfig"] }, { kind: "component", type: i5.LoginValueFormErrorComponent, selector: "ax-login-value-form-error", inputs: ["form", "propertyType"] }, { kind: "pipe", type: i2.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i6.PropertyTypeLabelPipe, name: "propertyTypeLabel" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: i8.SecondsFromNowPipe, name: "secondsFromNow" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RetryVerificationComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-retry-verification', template: "@if ((endTime | secondsFromNow) > 0) {\n  <p>\n    {{ 'agreement.verification.retry.message' | translate }}\n  </p>\n  <p>\n    {{\n      'agreement.verification.retry.message.time' | translate: {seconds: endTime | secondsFromNow}\n    }}\n  </p>\n} @else if (canChangeValue) {\n  <p>{{ 'agreement.verification.retry.message.1' | translate }}</p>\n  <ul>\n    <li>{{ 'agreement.verification.retry.message.1.option1' | translate }}</li>\n    <li>{{ 'agreement.verification.retry.message.1.option2' | translate }}</li>\n  </ul>\n\n  <div class=\"retry\">\n    <ax-value-edit\n      [form]=\"form\"\n      [autofocus]=\"false\"\n      [required]=\"true\"\n      [hint]=\"\n        'proposal.agreement.verification.property'\n          | translate: {propertyType: verificationType | propertyTypeLabel | lowercase}\n      \"\n      [type]=\"\n        verificationType.includes('MOBILE')\n          ? 'PHONE'\n          : verificationType === 'EMAIL'\n            ? 'EMAIL'\n            : 'PHONE'\n      \"\n      [label]=\"verificationType | propertyTypeLabel\"\n      [errorsTemplate]=\"errorsTemplate\"\n    ></ax-value-edit>\n    <button\n      [disabled]=\"form.invalid\"\n      axButton\n      filled\n      fullWidth\n      (click)=\"resendVerification()\"\n      color=\"primary\"\n    >\n      {{ 'agreement.verification.retry' | translate }}\n    </button>\n  </div>\n\n  <ng-template #errorsTemplate>\n    <ax-login-value-form-error\n      *ngIf=\"form.touched\"\n      [form]=\"form\"\n      [propertyType]=\"verificationType\"\n    ></ax-login-value-form-error>\n  </ng-template>\n\n  <p>{{ 'agreement.verification.retry.message.2' | translate }}</p>\n} @else {\n  <p>{{ 'agreement.verification.retry.message.1' | translate }}</p>\n  <ul>\n    <li>{{ 'agreement.verification.retry.message.1.option1' | translate }}</li>\n    <li>{{ 'agreement.verification.retry.message.1.option2' | translate }}</li>\n  </ul>\n  <div class=\"retry\">\n    <button\n      axButton\n      filled\n      fullWidth\n      color=\"primary\"\n      [disabled]=\"(endTime | secondsFromNow) > 0\"\n      (click)=\"resendVerification()\"\n    >\n      {{ 'agreement.verification.retry' | translate }}\n    </button>\n  </div>\n\n  <p>{{ 'agreement.verification.retry.message.2' | translate }}</p>\n}\n", styles: [":host{padding:1rem;display:block}:host p{margin:0}.retry{padding:0 0 1rem}\n"] }]
        }], ctorParameters: () => [{ type: i1.OverlayService }, { type: i0.ChangeDetectorRef }], propDecorators: { form: [{
                type: Input
            }], startDate: [{
                type: Input
            }], canChangeValue: [{
                type: Input
            }], verificationType: [{
                type: Input
            }], retryVerification: [{
                type: Input
            }], verificationValueChanges: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 