<template>
    <transition
        name="fade"
        mode="out-in">
        <div class="continue-modal-container">
            <modal
                ref="continueModal"
                :headerText="modalHeaderText"
                :footerButtonText="modalFooterText"
                @isModalOpened="setModalStatus"
                @footerButtonEvent="startNewReferral">
                <p class="mb-2 subheader-text text-center">
                    {{ modalSubHeaderText }}
                </p>
                <button
                    id="btnContinueReferral"
                    type="button"
                    class="btn btn-white-blue continue-referral
                    align-items-center justify-content-center d-inline-flex mt-2 py-3 px-4 delay w-100"
                    @click="continueReferral">
                    {{ modalBodyText }}
                </button>
            </modal>
        </div>
    </transition>
</template>

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

export default {
    name: 'continue-modal',
    components: {
        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>
    .btn-white-blue {
        border-radius: 0.5rem;
        border-color: $blue;
        color: $blue;
        font-size: 1rem;
        font-weight: $font-weight-bold;
        line-height: 1.5rem;
        background-color: #ffffff;

        --bs-btn-focus-shadow-rgb: 218, 72, 62;
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    }
</style>
