<template>
    <div id="afterpay-banner" role="alert">
        <component
            :is="'script'"
            src="https://js.squarecdn.com/square-marketplace.js"
            async></component>

        <div>
            <span
                class="callout"
                v-for="token in headerCopyTokens"
                :key="token"
                v-html="token"></span>
        </div>
        <div>
            <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 class="nbsp">&nbsp;</span>
            </span>
            <a
                id="afterpay-learnmore"
                href="#"
                data-afterpay-modal="en_US"
                data-bind="click:afterpayLearnMore">
                {{ modalCopy }}
            </a>
        </div>
    </div>
</template>

<script>
import { splitCopyOnCMSPlaceHolder, splitCMSCopyOnBR } 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,
        isInsuranceSelected: Boolean,
        afterpayExtendedPayOptionThreshold: Number,
    },
    data() {
        return {};
    },
    methods: {
        isInlineImageToken,
        isAfterpayPriceToken,
        getInlineAltText,
    },
    computed: {
        imageUrl() {
            return this.getCmsContent(this.cmsWidgetName, "Image");
        },
        hasImage() {
            return !!this.imageUrl;
        },
        headerCopyTokens() {
            return splitCMSCopyOnBR(this.getCmsContent(this.cmsWidgetName, "HeaderText"));
        },
        afterpayCopyTokens() {
            return splitCopyOnCMSPlaceHolder(this.getCmsContent(this.cmsWidgetName, "BodyText"));
        },
        modalCopy() {
            return this.getCmsContent(this.cmsWidgetName, "FooterText");
        },
        getTierOnePackagePrice() {
            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)
            );

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

            return price;
        },
    },
    components: {},
};
</script>

<style lang="scss" scoped>
#afterpay-banner {
    display: flex;
    flex-direction: column;
    background-color: $blue-150;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    border-radius: 1rem;
    @include media-breakpoint-up(md) {
        flex-direction: row;
    }

    .callout {
        font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
    }

    > div:first-of-type {
        display: flex;
        color: $black;
        font-size: $font-size-20;
        line-height: 2rem;
        @include media-breakpoint-down(md) {
            border-bottom: 1px solid;
            padding-bottom: 0.5rem;
            width: 100%;
            justify-content: center;

            > span:first-of-type {
                margin-right: 0.25rem;
            }
        }
        @include media-breakpoint-up(md) {
            flex-direction: column;
            border-right: 1px solid;
            padding-right: 1rem;
        }
    }

    > div:last-of-type {
        color: $gray-650;
        text-align: left;

        @include media-breakpoint-down(md) {
            padding-top: 1rem;
        }
        @include media-breakpoint-up(md) {
            padding-left: 1rem;
            max-width: 32rem;
        }
    }
    & .alert-heading {
        font-size: 0.875rem;
    }
}
#afterpay-learnmore {
    font-weight: 600;
    font-size: 0.875rem;
}
</style>
