<template>
    <div :id="renderElement"></div>
</template>

<style>
    .sezzle-learn-more, .sezzle-info-icon {
        display: inline !important;
        font-size: 14px !important;
    }

    .sezzle-payment-amount {
        font-weight: 800 !important;
        margin-right: 0 !important;
    }

    .sezzle-logo {
        transform-origin: left !important;
        width: 55px !important;
    }

    .sezzle-button-text {
        line-height: 14px !important;
    }
    
    .szl-light-image {
        width: 55px !important;
    }

    .checkout-payment__method-item .sezzle-checkout-button-wrapper {
        pointer-events: none;
    }

    .checkout-payment__method-item .sezzle-learn-more, .sezzle-info-icon {
        pointer-events: all;
    }

    @media (max-width: 992px) {
        .sezzle-checkout-button-wrapper:not(.checkout-payment__method-item *) {
            margin-top: -0.7rem !important;
        }

        .dialog-footer .sezzle-checkout-button-wrapper:not(.checkout-payment__method-item *) {
            margin-bottom: 1rem !important;
        }

        .mini-cart__summary .sezzle-checkout-button-wrapper:not(.checkout-payment__method-item *) {
            margin-bottom: 1rem !important;
        }

        .sezzle-learn-more, .sezzle-info-icon {
            font-size: 12px !important;
        }

        .sezzle-button-text {
            line-height: 12px !important;
            font-size: 12px !important;
        }

        .sezzle-logo {
            transform: scale(0.7) !important;
            padding-top: 2px;
        }
    }

    @media (min-width: 993px) {
        .sezzle-checkout-button-wrapper:not(.checkout-payment__method-item *) {
            margin-bottom: 1.3rem !important;
        }
    }
</style>

<script lang="babel">
    module.exports = {
        data() {
            return {
                renderSezzle: null
            };
        },
        props: {
            price: {
                type: String,
                default: "$0"
            },
            minPriceInCents: {
                type: Number,
                default: 100
            },
            maxPriceInCents: {
                type: Number,
                default: 250000
            },
            isEligible: {
                type: Boolean,
                default: true
            },
            widgetTemplate: {
                type: String,
                default: "or 4 interest-free payments of %%price%% with %%logo%% %%info%%"
            },
            ineligibleWidgetTemplate: {
                type: String,
                default: "%%logo%% Pay in 4 interest-free payments on purchases $1-$2,500. %%link%%"
            },
            renderElement: {
                type: String,
                default: "sezzle-widget"
            }
        },
        watch: {
            isEligible(newIsEligible) {
                if (!newIsEligible && this.renderSezzle) {
                    this.renderSezzle.alterPrice("$0");
                }
            },
            price(newPrice) {
                if (this.renderSezzle) {
                    this.renderSezzle.alterPrice(newPrice);
                }
            },
            widgetTemplate() {
                this.reset();
            },
            ineligibleWidgetTemplate() {
                this.reset();
            }
        },
        methods: {
            reset() {
                if (AwesomeSezzle) {
                    this.renderSezzle = new AwesomeSezzle({
                        amount: this.price,
                        renderElement: this.renderElement,
                        modalTheme: "color",
                        marginTop: 0,
                        marginBottom: 0,
                        marginLeft: 0,
                        marginRight: 0,
                        alignment: "left",
                        alignmentSwitchMinWidth: 576,
                        alignmentSwitchType: "center",
                        textColor: "inherit",
                        fontFamily: "inherit",
                        fontSize: 14,
                        fontWeight: 400,
                        widgetType: "product-page",
                        fixedHeight: 0,
                        logoSize: 0.75,
                        logoStyle: {
                            'marginRight': '-20px',
                            'marginLeft': 0
                        },
                        language: "en",
                        parseMode: "default",
                        merchantLocale: "North America",
                        widgetTemplate: this.widgetTemplate,
                        ineligibleWidgetTemplate: this.ineligibleWidgetTemplate,
                        minPrice: this.minPriceInCents,
                        maxPrice: this.maxPriceInCents
                    });
                    this.renderSezzle.init();
                }
            }
        },
        mounted () {
            this.reset();
        }
    }
</script>