<!-- 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"
                additionalClassesString="navigation-link"
                :useDefaultButton="false"
                @isModalOpened="setModalStatus"
                @footerButtonEvent="cancelClaimConfirmation">
                <div v-html="modalBodyText"></div>
                <button
                    id="btnContinueReferral"
                    type="button"
                    :aria-disabled="false"
                    class="btn btn-primary btn-override
                    align-items-center justify-content-center d-inline-flex mt-4 py-3 px-4 delay w-100"
                    @click="returnToClaim">
                    {{ modalBodyText2 }}
                </button>
            </modal>
        </div>
    </transition>
</template>

<script>
import modal from '@/digital-components/modal/modal.vue';

export default {
    name: 'cancel-claim-modal',
    components: {
        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>
.btn {
    &.btn-primary {
        position: relative;
        background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
        border: none;
        border-radius: $border-radius-lg;
        color: $white;
        justify-content: center;
        font-weight: $font-weight-bold;
        letter-spacing: inherit;
        @media (hover: hover) {
            background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
        }
    }
}
</style>
