<template>
    <app-modal :modal-id="modalId" modal-alignment="center" modal-size="md">
        <div class="modal-body d-flex flex-column justify-content-center modal-alert">
            <div class="text-center">
                <app-icon class="text-warning" :name="'alert-triangle'"/>
            </div>
            <h5 class="text-warning text-center font-weight-bold mt-4">{{ $t('are_you_sure') }}</h5>
            <p class="mb-4 text-center">{{ message ? message : $t('this_will_update_entire_app')}}</p>
            <div class="text-center">
                <a href="#" class="btn btn-warning mr-2" data-dismiss="modal" @click.prevent="confirmed">
                    {{ firstButtonName ? firstButtonName : $t('yes') }}
                </a>
                <a href="#" class="btn btn-secondary" data-dismiss="modal" @click.prevent="cancelled">
                    {{ secondButtonName ? secondButtonName : $t('no') }}
                </a>
            </div>
        </div>
    </app-modal>
</template>


<script>
    export default {
        name: "UpdateConfirmationModal",
        props: {
            modalId: {
                type: String,
                required: true
            },
            message: {
                type: String
            },
            firstButtonName: {
                type: String
            },
            secondButtonName: {
                type: String
            }
        },
        mounted() {
            $('#' + this.modalId).on('hidden.bs.modal', (e) => {
                this.closed();
            });
            $('#' + this.modalId).modal('show');
        },
        methods: {
            /**
             * $emit for confirmed opration
             */
            confirmed() {
                this.$emit('confirmed', false);
            },
            /**
             * $emit for cancelled opration
             */
            cancelled() {
                this.closed();
            },
            closed(){
                this.$emit('cancelled', false);
            }
        }
    }
</script>
