<template>
    <div class="steering-modal-container">
        <modal
            :ref="ModalName"
            :modalId="ModalName"
            :footerButtonText="ModalCloseButtonText"
            @footerButtonEvent="footerButtonClick">
            <h5 class="text-center mb-4 headline-text">
            {{ ModalHeadline }}
            </h5>
            <div>
                <div
                    class="mb-4"
                    v-html="ModalBodyText"></div>
                <div
                    class="mb-4"
                    v-if="ModalSubBodyText"
                    v-html="ModalSubBodyText"></div>
            </div>
        </modal>
    </div>
</template>

<script>
import modal from '@/digital-components/modal/modal.vue';
import { processIfStatements } from '@/helpers/cms-content-helper';
import states from '@/constants/states';

export default {
    name: 'content-group-modal',
    components: {
        modal
    },
    props: {
        cmsWidgetName: String
    },
    computed: {
        ModalName() {
            return this.cmsWidgetName;
        },
        ModalHeadline() {
            const header = this.getCmsContent(this.cmsWidgetName, 'HeaderText');
            return header.replace('{custom:state}', states[this.mainStore.order.customer.address.state]);
        },
        ModalSubheadertext() {
            return this.getCmsContent(this.cmsWidgetName, 'SubheaderText');
        },
        ModalBodyText() {
            const bodyText = this.getCmsContent(this.cmsWidgetName, 'BodyText');
            return processIfStatements(bodyText, 'custom', this.getStateSpecificText);
        },
        ModalSubBodyText() {
            const bodyText = this.getCmsContent(this.cmsWidgetName, 'BodyText2');
            return processIfStatements(bodyText, 'custom', this.getStateSpecificText);
        },
        ModalImage() {
            return this.getCmsContent(this.cmsWidgetName, 'Image');
        },
        ModalCloseButtonText() {
            return this.getCmsContent(this.cmsWidgetName, 'FooterText');
        }
    },
    methods: {
        openModal() {
            this.$refs[this.ModalName].openModal();
        },

        footerButtonClick() {
            this.$refs[this.ModalName].closeModal();
        },

        getStateSpecificText(value) {
            return this.mainStore.order.customer.address.state?.toLowerCase() === value?.toLowerCase();
        }
    }
};
</script>

<style lang="scss" scoped>
:deep(.modal) {
    .modal-footer {
        justify-content: center;
        button {
            background-color: $heritage-blue-secondary;
            color: $white;
            width: 71%;
        }
    }
}
</style>
