<template>
    <div class="afterpay-modal-banner" role="alert">
        <component
            src="https://js.squarecdn.com/square-marketplace.js"
            async
            :is="'script'">
        </component>
        <div class="afterpay-content">
            <span class="afterpay-copy" v-html="afterpayCopy"></span>
            <span class="afterpay-copy">{{ afterpayPaymentAmount }}</span>
            <span class="afterpay-copy" v-html="afterpayCopyTwo"></span>
            <img :src="imageUrl" class="image" alt="Afterpay logo"/>
            <span class="afterpay-copy">. &nbsp;</span>
            <a
                id="afterpay-learnmore"
                href="#"
                data-afterpay-modal="en_US"
                data-bind="click:afterpayLearnMore"
                class="afterpay-learn-more"
                @click.prevent>
                <span>Learn more</span>
            </a>
        </div>
    </div>
</template>

<script>
import { setupModalLinks } from "@/helpers/cms-content-helper";
import { formatAmountInDollars } from '@/helpers/text-helper.js';
import widgetFields from '@/constants/cms-widget-fields.js';
import { useMainStore } from '@/store/index.js';

export default {
    name: "afterpay-banner",
    components: {
    },
    props: {
        cmsWidgetName: String,
        totalServicePrice: Number
    },
    setup() {
        const mainStore = useMainStore();
        return { mainStore };
    },
    data() {
        return {};
    },
    computed: {
        imageUrl() {
            return this.getCmsContent(this.cmsWidgetName, widgetFields.CONTENT_GROUP_WIDGET.IMAGE);
        },
        afterpayCopy() {
            return this.getCmsContent(this.cmsWidgetName, widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
        },
        afterpayCopyTwo() {
            return this.getCmsContent(this.cmsWidgetName, widgetFields.CONTENT_GROUP_WIDGET.SUBHEADER_TEXT);
        },
        deductibleValue() {
            return this.mainStore.currentDeductible;
        },
        afterpayPaymentAmount() {
            return this.calculateAfterpayPaymentAmount;
        },
        isDeductibleScenario() {
            return this.mainStore.isVerified && this.mainStore.isDeductible;
        },
        calculateAfterpayPaymentAmount() {
            const totalAmount = this.isDeductibleScenario ? this.deductibleValue : this.totalServicePrice;
            const afterpayAmount = (totalAmount / 4).toFixed(2);
            return formatAmountInDollars(afterpayAmount);
        }

    }
};
</script>

<style lang="scss" scoped>
.afterpay-modal-banner {
    background-color: $blue-100;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 1rem 0.5rem 1rem;
    border-radius: 0.25rem;
    margin-top: 20px;
}

.afterpay-content {
    display: block;
    text-align: center;
}

.afterpay-copy {
    font-size: 0.875rem;
    color: $blue-700;
    font-weight: $font-weight-bold;
    line-height: 1.5rem;
}

.image-and-link {
    justify-content: center;
    align-items: center;
}

.image {
    border: 0;
    height: 20px;
    width: 83px;
}

:deep(a.afterpay-learn-more) {
    color: $blue-700;
    fill: $blue-700;
    text-decoration: underline;
    font-size: 0.875rem;
}
</style>