import { __awaiter } from 'tslib';
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { first } from 'rxjs/operators';
import * as i1 from '@aztrix/helpers';
import { HelperPipesModule } from '@aztrix/helpers';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@aztrix/icons';
import { IconsModule } from '@aztrix/icons';
import { ButtonModule } from '@aztrix/components/button';
import { SpinnerModule } from '@aztrix/components/spinner';

class StripeCardComponent {
    constructor(_changeDetectorRef, _environment, _element) {
        this._changeDetectorRef = _changeDetectorRef;
        this._environment = _environment;
        this._element = _element;
        this.showErrors = true;
        this.payedClicked = new EventEmitter();
        this.errorChanges = new EventEmitter();
        this.loading$ = new BehaviorSubject(false);
    }
    ngAfterViewInit() {
        this._environment
            .string$('STRIPE_API_KEY')
            .pipe(first((value) => !!value))
            .subscribe((stripeApiKey) => {
            this.stripe = Stripe(stripeApiKey);
            const styles = getComputedStyle(this._element.nativeElement);
            const appearance = {
                theme: 'stripe',
                variables: {
                    colorPrimary: styles.getPropertyValue('--primary-color-500'),
                    colorBackground: '#ffffff',
                    colorText: styles.getPropertyValue('--font-color'),
                    colorDanger: styles.getPropertyValue('--warn-color-500'),
                    fontFamily: styles.getPropertyValue('--font'),
                    borderRadius: '5px',
                },
                rules: {
                    '.Input': {
                        borderColor: '#7a8692',
                        borderWidth: '2px',
                        padding: '16px 12px',
                    },
                    '.Input:focus': {
                        boxShadow: 'none',
                    },
                },
            };
            this.elements = this.stripe.elements({
                mode: 'payment',
                currency: 'eur',
                amount: this.amount,
                setup_future_usage: 'off_session',
                paymentMethodCreation: 'manual',
                paymentMethodTypes: ['card'],
                appearance,
            });
            this.paymentElement = this.elements.create('payment', {
                layout: {
                    type: 'tabs',
                    defaultCollapsed: false,
                    radios: true,
                    spacedAccordionItems: false,
                },
            });
            this.paymentElement.mount(this.cardElement.nativeElement);
            this.paymentElement.addEventListener('change', ({ error }) => {
                this.cardErrors = error ? error : undefined;
                this.errorChanges.emit(error);
                this._changeDetectorRef.detectChanges();
            });
        });
    }
    createPaymentMethod() {
        return __awaiter(this, void 0, void 0, function* () {
            const { submitError } = yield this.elements.submit();
            const { paymentMethod, error } = yield this.stripe.createPaymentMethod({
                elements: this.elements,
            });
            if (error || submitError) {
                this.cardErrors = error.code || submitError.code;
                this._changeDetectorRef.detectChanges();
            }
            else {
                return paymentMethod;
            }
        });
    }
}
StripeCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: StripeCardComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.EnvironmentService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
StripeCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: StripeCardComponent, selector: "ax-stripe-card", inputs: { amount: "amount", showErrors: "showErrors" }, outputs: { payedClicked: "payedClicked", errorChanges: "errorChanges" }, viewQueries: [{ propertyName: "cardElement", first: true, predicate: ["cardElement"], descendants: true }], ngImport: i0, template: "<div class=\"container\">\n  <form>\n    <div #cardElement></div>\n  </form>\n\n  <div class=\"errors\" *ngIf=\"showErrors\">\n    <div class=\"c-property-edit__error\" *ngIf=\"cardErrors\">\n      <ax-icon class=\"icon\" name=\"alert-circle\"></ax-icon>\n      <span>{{ 'stripe.' + cardErrors.code + '.error' | translate }}</span>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;align-items:center;border-radius:5px;min-height:56px;transition:border .4s cubic-bezier(.25,.8,.25,1)}:host:hover{border-color:#000000de}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: StripeCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-stripe-card', template: "<div class=\"container\">\n  <form>\n    <div #cardElement></div>\n  </form>\n\n  <div class=\"errors\" *ngIf=\"showErrors\">\n    <div class=\"c-property-edit__error\" *ngIf=\"cardErrors\">\n      <ax-icon class=\"icon\" name=\"alert-circle\"></ax-icon>\n      <span>{{ 'stripe.' + cardErrors.code + '.error' | translate }}</span>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;align-items:center;border-radius:5px;min-height:56px;transition:border .4s cubic-bezier(.25,.8,.25,1)}:host:hover{border-color:#000000de}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.EnvironmentService }, { type: i0.ElementRef }]; }, propDecorators: { amount: [{
                type: Input
            }], showErrors: [{
                type: Input
            }], payedClicked: [{
                type: Output
            }], errorChanges: [{
                type: Output
            }], cardElement: [{
                type: ViewChild,
                args: ['cardElement']
            }] } });

class StripeCardModule {
}
StripeCardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: StripeCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
StripeCardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.5", ngImport: i0, type: StripeCardModule, declarations: [StripeCardComponent], imports: [CommonModule, HelperPipesModule, IconsModule, ButtonModule, SpinnerModule], exports: [StripeCardComponent] });
StripeCardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: StripeCardModule, imports: [CommonModule, HelperPipesModule, IconsModule, ButtonModule, SpinnerModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: StripeCardModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [StripeCardComponent],
                    imports: [CommonModule, HelperPipesModule, IconsModule, ButtonModule, SpinnerModule],
                    exports: [StripeCardComponent],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { StripeCardComponent, StripeCardModule };
//# sourceMappingURL=aztrix-components-stripe-card.mjs.map
//# sourceMappingURL=aztrix-components-stripe-card.mjs.map
