<template>
    <div class="alert fade show my-2 py-2 border-0 alert-info" role="alert">
        <component :is="'script'" src="https://js.afterpay.com/afterpay-1.x.js" async></component>

        <div
            class="mx-4 my-0 alert-heading text-center"
            :class="[isAfterpayBreakoutDisplay ? 'fw-bolder' : 'fw-bold']">
            <span v-for="token in afterpayCopyTokens" :key="token">
                <span v-if="isAfterpayPriceToken(token)">{{ afterpayPrice }}</span>
                <span v-else-if="isInlineImageToken(token)">
                    <img v-if="hasImage" :src="imageUrl" :alt="getInlineAltText(token)" />
                    <span v-else>{{ getInlineAltText(token) }}</span>
                </span>
                <span v-else v-html="token"></span>
            </span>
            &nbsp;
            <a
                id="afterpay-learnmore"
                href="#"
                data-afterpay-modal="en_US-safelite"
                data-bind="click:afterpayLearnMore">
                {{ modalCopy }}
            </a>
        </div>
    </div>
</template>

<script>
import { splitCopyOnCMSPlaceHolder } from "@/helpers/cms-content-helper";
import baseMixin from "@/mixins/base-mixin.js";
import { getPromosThatMatchLineItemsOnOrder } from "@/helpers/promotions-helper";
import { getArrayOfAllLineItemsAndChildParts } from "@/store";

const INLINE_IMAGE_TOKEN = "custom:inlineImage";
const AFTERPAY_PRICE_TOKEN = "custom:afterpayPrice";

function isInlineImageToken(token) {
    return token.includes(INLINE_IMAGE_TOKEN);
}
function isAfterpayPriceToken(token) {
    return token.includes(AFTERPAY_PRICE_TOKEN);
}

function getInlineAltText(token) {
    const innerTokens = token.split(",");

    return innerTokens[1] ?? "";
}

export default {
    name: "afterpay-modal-banner",
    props: {
        cmsWidgetName: String,
        lineItems: Array,
        isAfterpayBreakoutDisplay: Boolean,
    },
    data() {
        return {};
    },
    methods: {
        isInlineImageToken,
        isAfterpayPriceToken,
        getInlineAltText,
    },
    computed: {
        imageUrl() {
            return this.getCmsContent(this.cmsWidgetName, "Image");
        },
        hasImage() {
            return !!this.imageUrl;
        },
        afterpayCopyTokens() {
            if (this.isAfterpayBreakoutDisplay) {
                // Text for Afterpay Breakout experiment
                return splitCopyOnCMSPlaceHolder(
                    this.getCmsContent(this.cmsWidgetName, "BodyText2")
                );
            } else {
                return splitCopyOnCMSPlaceHolder(
                    this.getCmsContent(this.cmsWidgetName, "HeaderText")
                );
            }
        },
        modalCopy() {
            return this.getCmsContent(this.cmsWidgetName, "BodyText");
        },
        afterpayPrice() {
            let allLineItems = getArrayOfAllLineItemsAndChildParts(this.lineItems);
            if (this.lineItems.promos) {
                allLineItems = allLineItems?.filter((item) => item.partType !== "PROMO_DISCOUNT");
            }

            let price = baseMixin.methods.getTierOnePackagePrice(
                baseMixin.methods.filterOutFees(allLineItems)
            );

            let vapsLineItemsForSelectedPackage = this.lineItems.vaps;
            vapsLineItemsForSelectedPackage.forEach((lineItem) => {
                price += baseMixin.methods.getTotalLineItemPrice(lineItem);
            });

            if (this.lineItems.promos) {
                let allLineItems = getArrayOfAllLineItemsAndChildParts(this.lineItems);
                const promos = getPromosThatMatchLineItemsOnOrder(
                    this.lineItems.promos,
                    allLineItems
                );
                promos.forEach((promo) => {
                    price += baseMixin.methods.getTotalLineItemPrice(promo);
                });
            }

            const adjusted = (price / 4).toFixed(2);

            return `$${adjusted}`;
        },
    },
    components: {},
};
</script>

<style lang="scss" scoped>
.alert {
    padding: 0.675rem 0;
    &.alert-info {
        background-color: $blue-100;
        .alert-heading {
            color: $blue-700;
        }
        &.fw-bolder {
            font-weight: 600;
        }
        img {
            vertical-align: text-top;
        }
        svg {
            fill: $blue-700;
            width: 1rem;
            height: 1rem;
        }
    }
    & .alert-heading {
        font-size: 0.875rem;
    }
    #afterpay-learnmore {
        white-space: nowrap;
    }
}
</style>
