<template>
    <transition
        name="fade"
        mode="out-in">
        <div class="continue-modal-container">
            <modal
                ref="continueModal"
                :headerText="modalHeaderText"
                :footerButtonText="modalFooterText"
                buttonVariant="primary"
                @isModalOpened="setModalStatus"
                @footerButtonEvent="startNewReferral">
                <p class="mb-2 subheader-text text-center">
                    {{ modalSubHeaderText }}
                </p>
                <buttonMain
                    id="btnContinueReferral"
                    variant="success"
                    class="mt-2 w-100"
                    :buttonText="modalBodyText"
                    @click-event="continueReferral">
                </buttonMain>
            </modal>
        </div>
    </transition>
</template>

<script>
import modal from '@/digital-components/modal/modal.vue';
import { getISSCookie } from '@/helpers/cookie-helper.js';
import ButtonMain from '@/ux-components/button-main/button-main.vue';

export default {
    name: 'continue-modal',
    components: {
        ButtonMain,
        modal
    },
    emits: ['continue-previous-referral', 'start-new-referral'],
    data() {
        return {
            isModalOpened: false
        };
    },
    computed: {
        getMakeModelString() {
            const cookie = getISSCookie();
            return cookie ? `${cookie.VehicleMake} ${cookie.VehicleModel}` : '';
        },
        modalBodyText() {
            return this.getCmsContent('ContinueReferralModalWidget', 'BodyText');
        },
        modalHeaderText() {
            return this.getCmsContent('ContinueReferralModalWidget', 'HeaderText');
        },
        modalFooterText() {
            return this.getCmsContent('ContinueReferralModalWidget', 'FooterText');
        },
        modalSubHeaderText() {
            return this.getCmsContent('ContinueReferralModalWidget', 'SubheaderText')
                .replaceAll('{custom:mmFound}', this.getMakeModelString);
        }
    },
    methods: {
        openModal() {
            this.$refs.continueModal.openModal();
        },
        setModalStatus(isOpened) {
            this.isModalOpened = isOpened;
        },
        closeModal() {
            this.$refs.continueModal.closeModal();
        },
        continueReferral() {
            this.$emit('continue-previous-referral');
        },
        startNewReferral() {
            this.$emit('start-new-referral');
        }
    }
};
</script>

<style lang="scss" scoped>

</style>
