import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import { StripeCardComponent } from '@aztrix/components/stripe-card';
import { PaymentsService, TierSubscriptionRepresentation, } from '@aztrix/sdk';
import { BehaviorSubject, distinctUntilChanged, first, from, map, shareReplay, } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "@aztrix/sdk";
import * as i2 from "@angular/common";
import * as i3 from "@aztrix/icons";
import * as i4 from "@aztrix/components/button";
import * as i5 from "@aztrix/components/stripe-card";
import * as i6 from "@aztrix/components/payment-method";
import * as i7 from "@angular/material/legacy-form-field";
import * as i8 from "@angular/material/legacy-select";
import * as i9 from "@angular/material/legacy-core";
import * as i10 from "@aztrix/helpers";
export class ConfirmTierPaymentComponent {
    constructor(_paymentsService) {
        this._paymentsService = _paymentsService;
        this.confirm = new EventEmitter();
        this.cancel = new EventEmitter();
        this._paymentMethods$ = this._paymentsService
            .getPaymentMethods()
            .pipe(distinctUntilChanged(), shareReplay(1));
        this._emptyPaymentMethod = {
            id: null,
            card: null,
            created: null,
            type: null,
        };
        this._paymentMethodControl = new FormControl(this._emptyPaymentMethod);
        this._loading$ = new BehaviorSubject(false);
    }
    ngOnInit() {
        this._paymentMethods$.pipe(first()).subscribe((paymentMethods) => {
            if (paymentMethods?.length) {
                this._paymentMethodControl.setValue(paymentMethods[0]);
            }
        });
    }
    changeMethod(event) {
        this._paymentMethodControl.setValue(event.value);
    }
    pay() {
        if (this._paymentMethodControl?.value?.id) {
            this.confirm.next(this._paymentMethodControl?.value);
        }
        else {
            this._loading$.next(true);
            from(this._stripeCard.createPaymentMethod())
                .pipe(map((paymentMethod) => {
                if (paymentMethod) {
                    this._paymentMethodControl.setValue(paymentMethod);
                }
                this._loading$.next(false);
                return this._stripeCard.cardErrors === undefined;
            }))
                .subscribe((valid) => {
                if (valid && this._paymentMethodControl?.value) {
                    this.confirm.next(this._paymentMethodControl?.value);
                }
            });
        }
    }
}
ConfirmTierPaymentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ConfirmTierPaymentComponent, deps: [{ token: i1.PaymentsService }], target: i0.ɵɵFactoryTarget.Component });
ConfirmTierPaymentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: ConfirmTierPaymentComponent, selector: "ax-confirm-tier-payment", inputs: { tierSubscription: "tierSubscription" }, outputs: { confirm: "confirm", cancel: "cancel" }, viewQueries: [{ propertyName: "_stripeCard", first: true, predicate: ["cardDetails"], descendants: true }], ngImport: i0, template: "<div class=\"product-info\" *ngIf=\"tierSubscription\">\n  <h4>{{ tierSubscription.tier }}</h4>\n  <h2 class=\"price\">\n    {{ tierSubscription.price / 100 | currency: tierSubscription.currency?.toUpperCase() }}\n    <span>/ {{ 'label.month' | translate }}</span>\n  </h2>\n</div>\n\n<mat-form-field\n  appearance=\"outline\"\n  class=\"c-input\"\n  style=\"width: 100%\"\n  *ngIf=\"(_paymentMethods$ | async)?.length > 0\"\n>\n  <mat-label>{{ 'payment.tab.billing.payment-methods' | translate }}</mat-label>\n  <mat-select\n    class=\"select\"\n    [(value)]=\"stripePaymentMethod\"\n    (selectionChange)=\"changeMethod($event)\"\n  >\n    <mat-select-trigger *ngIf=\"_paymentMethodControl?.value\">\n      <ax-payment-method\n        [method]=\"_paymentMethodControl?.value\"\n        [selectMode]=\"true\"\n      ></ax-payment-method>\n    </mat-select-trigger>\n\n    <mat-option *ngFor=\"let paymentMethod of _paymentMethods$ | async\" [value]=\"paymentMethod\">\n      <ax-payment-method [method]=\"paymentMethod\" [selectMode]=\"true\"></ax-payment-method>\n    </mat-option>\n    <mat-option [value]=\"_emptyPaymentMethod\">\n      <ax-payment-method [method]=\"emptyPaymentMethod\" [selectMode]=\"true\"></ax-payment-method>\n    </mat-option>\n  </mat-select>\n</mat-form-field>\n\n<div *ngIf=\"!_paymentMethodControl?.value.id\">\n  <ax-stripe-card #cardDetails></ax-stripe-card>\n  <div class=\"errors\">\n    <div class=\"c-property-edit__error\" *ngIf=\"cardDetails.cardErrors\">\n      <ax-icon class=\"icon\" name=\"alert-circle\"></ax-icon>\n      <span>{{ 'stripe.' + cardDetails.cardErrors + '.error' | translate }}</span>\n    </div>\n  </div>\n</div>\n\n<div class=\"h-button-wrapper\">\n  <ax-button color=\"danger\" (click)=\"cancel.next()\">{{ 'label.cancel' | translate }}</ax-button>\n  <ax-button filled color=\"primary\" (click)=\"pay()\" [loading]=\"_loading$ | async\">{{\n    'label.pay' | translate\n  }}</ax-button>\n</div>\n", styles: [":host{display:block;padding:1rem 1rem .5rem}.product-info{text-align:center;margin-bottom:2rem}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "component", type: i4.ButtonComponent, selector: "ax-button" }, { kind: "component", type: i5.StripeCardComponent, selector: "ax-stripe-card", inputs: ["amount", "description"], outputs: ["payedClicked"] }, { kind: "component", type: i6.PaymentMethodComponent, selector: "ax-payment-method", inputs: ["method", "selectMode"] }, { kind: "component", type: i7.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLegacyLabel, selector: "mat-label" }, { kind: "component", type: i8.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i8.MatLegacySelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i9.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ConfirmTierPaymentComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-confirm-tier-payment', template: "<div class=\"product-info\" *ngIf=\"tierSubscription\">\n  <h4>{{ tierSubscription.tier }}</h4>\n  <h2 class=\"price\">\n    {{ tierSubscription.price / 100 | currency: tierSubscription.currency?.toUpperCase() }}\n    <span>/ {{ 'label.month' | translate }}</span>\n  </h2>\n</div>\n\n<mat-form-field\n  appearance=\"outline\"\n  class=\"c-input\"\n  style=\"width: 100%\"\n  *ngIf=\"(_paymentMethods$ | async)?.length > 0\"\n>\n  <mat-label>{{ 'payment.tab.billing.payment-methods' | translate }}</mat-label>\n  <mat-select\n    class=\"select\"\n    [(value)]=\"stripePaymentMethod\"\n    (selectionChange)=\"changeMethod($event)\"\n  >\n    <mat-select-trigger *ngIf=\"_paymentMethodControl?.value\">\n      <ax-payment-method\n        [method]=\"_paymentMethodControl?.value\"\n        [selectMode]=\"true\"\n      ></ax-payment-method>\n    </mat-select-trigger>\n\n    <mat-option *ngFor=\"let paymentMethod of _paymentMethods$ | async\" [value]=\"paymentMethod\">\n      <ax-payment-method [method]=\"paymentMethod\" [selectMode]=\"true\"></ax-payment-method>\n    </mat-option>\n    <mat-option [value]=\"_emptyPaymentMethod\">\n      <ax-payment-method [method]=\"emptyPaymentMethod\" [selectMode]=\"true\"></ax-payment-method>\n    </mat-option>\n  </mat-select>\n</mat-form-field>\n\n<div *ngIf=\"!_paymentMethodControl?.value.id\">\n  <ax-stripe-card #cardDetails></ax-stripe-card>\n  <div class=\"errors\">\n    <div class=\"c-property-edit__error\" *ngIf=\"cardDetails.cardErrors\">\n      <ax-icon class=\"icon\" name=\"alert-circle\"></ax-icon>\n      <span>{{ 'stripe.' + cardDetails.cardErrors + '.error' | translate }}</span>\n    </div>\n  </div>\n</div>\n\n<div class=\"h-button-wrapper\">\n  <ax-button color=\"danger\" (click)=\"cancel.next()\">{{ 'label.cancel' | translate }}</ax-button>\n  <ax-button filled color=\"primary\" (click)=\"pay()\" [loading]=\"_loading$ | async\">{{\n    'label.pay' | translate\n  }}</ax-button>\n</div>\n", styles: [":host{display:block;padding:1rem 1rem .5rem}.product-info{text-align:center;margin-bottom:2rem}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.PaymentsService }]; }, propDecorators: { tierSubscription: [{
                type: Input
            }], confirm: [{
                type: Output
            }], cancel: [{
                type: Output
            }], _stripeCard: [{
                type: ViewChild,
                args: ['cardDetails']
            }] } });
//# sourceMappingURL=data:application/json;base64, 