<!-- eslint-disable vue/no-v-html -->
<template>
    <transition
        name="fade"
        mode="out-in">
        <div class="cancel-claim-modal-container">
            <modal
                ref="cancelClaimModal"
                :headerText="modalHeaderText"
                :footerButtonText="modalFooterText"
                buttonVariant="link"
                @isModalOpened="setModalStatus"
                @footerButtonEvent="cancelClaimConfirmation">
                <div v-html="modalBodyText"></div>
                <buttonMain
                    id="btnContinueReferral"
                    variant="success"
                    :buttonText="modalBodyText2"
                    class="mt-4 w-100"
                    @clickEvent="returnToClaim">
                </buttonMain>
            </modal>
        </div>
    </transition>
</template>

<script>
import modal from '@/digital-components/modal/modal.vue';
import ButtonMain from '@/ux-components/button-main/button-main.vue';

export default {
    name: 'cancel-claim-modal',
    components: {
        ButtonMain,
        modal
    },
    emits: ['cancel-claim-confirmation', 'return-to-claim'],
    data() {
        return {
            isModalOpened: false
        };
    },
    computed: {
        modalBodyText() {
            return this.getCmsContent('CancelClaimModal', 'BodyText');
        },
        modalBodyText2() {
            return this.getCmsContent('CancelClaimModal', 'BodyText2');
        },
        modalHeaderText() {
            return this.getCmsContent('CancelClaimModal', 'HeaderText');
        },
        modalFooterText() {
            return this.getCmsContent('CancelClaimModal', 'FooterText');
        }
    },
    methods: {
        openModal() {
            this.$refs.cancelClaimModal.openModal();
        },
        setModalStatus(isOpened) {
            this.isModalOpened = isOpened;
        },
        closeModal() {
            this.$refs.cancelClaimModal.closeModal();
        },
        cancelClaimConfirmation() {
            this.$emit('cancel-claim-confirmation');
        },
        returnToClaim() {
            this.$emit('return-to-claim');
        }
    }
};
</script>

<style lang="scss" scoped>

</style>
