import { h } from "@stencil/core";
import { formatCurrency } from "../../../utils/utils";
import { checkoutStore } from "../../../store/checkout.store";
import { StyledHost } from "../../../ui-components";
import { PAYMENT_METHODS } from "../ModularCheckout";
const sezzleLogo = (h("img", { class: "sezzle-smart-button-logo-img", src: "https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg", alt: "Sezzle", style: {
        display: 'inline',
        width: '80px',
        marginLeft: '5px',
        marginTop: '-5px',
    } }));
export class JustifiSezzlePaymentMethod {
    constructor() {
        this.paymentMethodOptionId = PAYMENT_METHODS.SEZZLE;
        this.initializeSezzleCheckout = () => {
            let resolveSezzlePromise;
            this.sezzlePromise = new Promise((resolve) => { resolveSezzlePromise = resolve; });
            const amount = Number(checkoutStore.paymentAmount);
            const Checkout = window.Checkout;
            const checkout = new Checkout({
                mode: 'popup',
                publicKey: checkoutStore.bnplProviderClientId,
                apiMode: checkoutStore.bnplProviderMode,
                apiVersion: checkoutStore.bnplProviderApiVersion,
            });
            checkout.sezzleButtonElement = this.sezzleButtonRef;
            checkout.init({
                onClick: function (event) {
                    event.preventDefault();
                    checkout.startCheckout({
                        checkout_url: checkoutStore.bnplProviderCheckoutUrl,
                    });
                },
                onComplete: (event) => resolveSezzlePromise({ bnpl: event.data }),
                onCancel: (event) => resolveSezzlePromise({ bnpl: event.data }),
                onFailure: (event) => resolveSezzlePromise({ bnpl: event.data }),
            });
            this.sezzleCheckout = checkout;
            this.installmentPlan = this.sezzleCheckout.getInstallmentPlan(amount);
        };
    }
    componentDidRender() {
        if (!this.scriptRef)
            return;
        this.scriptRef.onload = () => {
            this.sezzleButtonRef = document.createElement('button');
            this.initializeSezzleCheckout();
        };
    }
    async resolvePaymentMethod(insuranceValidation) {
        if (!insuranceValidation.isValid) {
            return { validationError: true };
        }
        this.sezzleButtonRef.click();
        return this.sezzlePromise;
    }
    async handleSelectionClick() {
        checkoutStore.selectedPaymentMethod = { type: PAYMENT_METHODS.SEZZLE };
        this.paymentMethodOptionSelected.emit(this.paymentMethodOptionId);
    }
    render() {
        var _a, _b;
        if (!checkoutStore.bnplEnabled) {
            console.warn('justifi-sezzle-payment-method: BNPL is not enabled for this account.');
            return null;
        }
        return (h(StyledHost, { class: "payment-method" }, h("script", { src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", null, h("div", null, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (h("small", null, h("span", null, (_a = this.installmentPlan) === null || _a === void 0 ? void 0 : _a.installments.length), "\u00A0", h("span", null, this.installmentPlan.schedule, " payments of"), "\u00A0", h("span", { class: "fw-bold" }, formatCurrency((_b = this.installmentPlan) === null || _b === void 0 ? void 0 : _b.installments[0].amountInCents)))))));
    }
    static get is() { return "justifi-sezzle-payment-method"; }
    static get encapsulation() { return "shadow"; }
    static get states() {
        return {
            "installmentPlan": {},
            "sezzleCheckout": {},
            "sezzlePromise": {}
        };
    }
    static get events() {
        return [{
                "method": "paymentMethodOptionSelected",
                "name": "paymentMethodOptionSelected",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "resolvePaymentMethod": {
                "complexType": {
                    "signature": "(insuranceValidation: any) => Promise<PaymentMethodPayload>",
                    "parameters": [{
                            "name": "insuranceValidation",
                            "type": "any",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "PaymentMethodPayload": {
                            "location": "import",
                            "path": "../../checkout/payment-method-payload",
                            "id": "src/components/checkout/payment-method-payload.ts::PaymentMethodPayload"
                        }
                    },
                    "return": "Promise<PaymentMethodPayload>"
                },
                "docs": {
                    "text": "",
                    "tags": []
                }
            },
            "handleSelectionClick": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": []
                }
            }
        };
    }
}
