<template>
    <transition
        name="fade"
        mode="out-in">
        <div class="cancel-claim-modal-container">
            <modal
                ref="cancelClaimModal"
                :headerText="modalHeaderText"
                @isModalOpened="setModalStatus"
                :displayFooterButton="false">
                <div v-html="modalBodyText"></div>
                <buttonMain
                    id="btnContinueReferral"
                    variant="success"
                    :buttonText="modalBodyText2"
                    class="mt-5 w-100"
                    @clickEvent="returnToClaim">
                </buttonMain>
                <div class="text-center mt-5">
                    <textLink
                        class="cancel-link"
                        linkType="text"
                        text="No, I want to cancel"
                        href="#!"
                        @clickEvent="cancelClaimConfirmation">
                    </textLink>
                </div>
            </modal>
        </div>
    </transition>
</template>

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

export default {
    name: 'cancel-claim-modal',
    components: {
        ButtonMain,
        modal,
        textLink
    },
    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>
:deep(.modal) {
    .modal-title {
        margin-top: 1rem;
    }
    .cancel-link {
        text-decoration: underline;
    }
    .modal-footer {
        padding-bottom: 1rem;
    }
    .modal-body {
        color: #4d4e53;
    }
}
</style>
