<template>
    <transition
        name="fade"
        mode="out-in">
        <div class="continue-modal-container">
            <modal
                ref="continueModal"
                :headerText="modalHeaderText"
                :footerButtonText="modalFooterText"
                buttonVariant="primary"
                :displayCloseButton="false"
                @isModalOpened="setModalStatus"
                @footerButtonEvent="startNewReferral">
                <p class="continue-subheader">
                    {{ modalSubHeaderText }}
                </p>
                <buttonMain
                    id="btnContinueReferral"
                    variant="success"
                    class="continue-btn w-100"
                    :buttonText="modalBodyText"
                    @click-event="continueReferral">
                </buttonMain>
                <div class="or-container">
                    <hr/>
                    <span>or</span>
                </div>
            </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.toUpperCase());
        },
        accountName() {
            return this.mainStore.issConfig.clientName.replaceAll(" ", "").replaceAll("&", "amp");
        }
    },
    methods: {
        openModal() {
            this.pushEventToGA("existing_claim", "pop_up_displayed", this.accountName, true);
            this.$refs.continueModal.openModal();
        },
        setModalStatus(isOpened) {
            this.isModalOpened = isOpened;
        },
        closeModal() {
            this.$refs.continueModal.closeModal();
        },
        continueReferral() {
            this.pushEventToGA("existing_claim", "finish_claim", this.accountName, true);
            this.$emit('continue-previous-referral');
        },
        startNewReferral() {
            this.pushEventToGA("existing_claim", "start_new_claim", this.accountName, true);
            this.$emit('start-new-referral');
        }
    }
};
</script>

<style lang="scss" scoped>
.continue-modal-container {
    .continue-subheader {
        margin-bottom: 1.25rem;
    }

    .continue-btn {
        background-color: #098649;
    }

    .or-container {
        position: relative;
        hr {
            margin: 1.875rem 0 1.25rem;
        }
        span {
            position: absolute;
            top: -0.75rem;
            left: 50%;
            margin-left: -1.625rem;
            padding: 0 1.125rem;
            background-color: white;
        }
    }

    :deep(.modal) {
        .modal-dialog {
            .modal-content {
                .modal-header {
                    padding: 1.25rem 1rem .625rem;

                    .modal-title {
                        padding: 0;
                    }
                }

                .modal-body {
                    padding: 0rem 1rem;
                }

                .modal-footer {
                    padding: 0rem 1rem 1rem;

                    button {
                        background-color: $heritage-blue-primary;
                        color: $white;
                        font-weight: 600;
                        margin-bottom: 1.25rem;

                        &:hover {
                            background-color: #00559e;
                        }
                    }
                }
            }
            @include media-breakpoint-down(md) {
                margin: 1.625rem 1rem 0;
            }
        }
    }
}
</style>
