<template>
    <modal
        :ref="ModalName"
        :modalId="ModalName"
        :footerButtonText="ModalCloseButtonText"
        @footerButtonEvent="footerButtonClick">
        <h5 class="text-center mb-4">
        {{ ModalHeadline }}
        </h5>
        <div>
            <div
                class="mb-4"
                v-html="ModalBodyText"></div>
            <div
                v-if="ModalSubBodyText"
                v-html="ModalSubBodyText"></div>
        </div>
    </modal>
</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>
.modal {
    &.modal-component {
        .modal-dialog {
            .modal-content {
                .modal-body {
                    .modal-sub-body {
                        color: $gray-600;
                    }
                    ul {
                        margin-bottom: 0;
                    }
                    p {
                        &:last-child {
                            margin-bottom: 0;
                        }
                    }
                }
            }
        }
    }
}
</style>
