<template>
    <div class="recal-modal-container">
        <modal
            ref="recalModal"
            :footerButtonText="modalCloseButtonText"
            @footerButtonEvent="footerButtonClick">
            <h5
                class="header-text"
                v-html="modalHeaderText"></h5>
            <img
                :src="modalImage"
                class="mw-100 d-flex"
                alt="" />
            <div v-html="modalBodyText" class="recal-modal-body"></div>
        </modal>
    </div>
</template>

<script>
import modal from '@/digital-components/modal/modal.vue';

export default {
    name: 'recal-modal',
    components: {
        modal
    },
    props: {
        cmsWidgetName: {
            type: String,
            default: 'RecalModal'
        }
    },
    computed: {
        modalBodyText() {
            return this.getCmsContent(this.cmsWidgetName, 'BodyText').replaceAll('{custom:vehicleMake}', this.vehicleMake);
        },
        modalHeaderText() {
            return this.getCmsContent(this.cmsWidgetName, 'HeaderText');
        },
        modalImage() {
            return this.getCmsContent(this.cmsWidgetName, 'Image');
        },
        modalCloseButtonText() {
            return this.getCmsContent(this.cmsWidgetName, 'FooterText');
        },
        vehicleMake() {
            return this.mainStore.order.vehicle.make.toUpperCase();
        }
    },
    methods: {
        openModal() {
            this.$refs.recalModal.openModal();
        },
        footerButtonClick() {
            this.$refs.recalModal.closeModal();
        },
    }

};
</script>

<style lang="scss" scoped>
:deep(.modal) {
    &.modal-component {
        .modal-dialog {
            .modal-content {
                .modal-body {
                    padding-left: 1.25rem;
                    padding-right: 1.25rem;
                }
            }
        }
        .modal-footer {
            button {
                &:hover {
                    background-color: $white;
                    color: $heritage-blue-secondary;
                }
                &:focus, &:active {
                    box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $heritage-blue-secondary; 
                }
                font-weight: 600;
                color: $heritage-blue-secondary;
                border-color: $heritage-blue-secondary;
            }
        }
    }
    .recal-modal-body {
        padding: 10px 0 10px 0;
        p:first-child {
            margin-bottom: 10px;
        }
        p {
            strong {
                font-weight: 600;
                color: $black;
            }
        }
    }
}
</style>
