<template>
    <transition name="modal-animation">
        <div class="modal fade show modal-overlay" :class="{ 'show-modal' : modalActive == true}" tabindex="-1" id="connection_modal" v-show="modalActive">
            <div class="modal-dialog modal-dialog-centered" >
                <div class="modal-content">
                    <div class="modal-header" :class="backgroundColor" id="connection_modal_header" style="height: 39px;padding-top: 8px;">
                        <h5 class="text-white mb-0" id="connection_modal_heading">{{title}}</h5>
                        <button @click="cancelModal" type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p class="text-dark">
                            <span  v-show="showLoad" class="spinner-grow spinner-grow-sm" role="status" id="spn_connection_modal" style="width: 24px;height: 24px;margin-right: 8px;"></span>
                            <label id="txt_connection_modal" style="font-size: 14px;">
                                <span v-html="text"></span>
                                <br>
                            </label>
                        </p>
                    </div>
                    <div class="modal-footer" style="border-style: none;">
                        <button @click="cancelModal" v-show="showCloseButton" class="btn btn-dark" id="btn_connection_cancel_modal" type="button" data-dismiss="modal">Cancel</button>
                        <button @click="okModal" v-show="showConfirmButton" class="btn" :class="backgroundColor" id="btn_connection_modal" type="button" style="color: #ffffff;">{{confirmButtonText}}</button>
                        <button @click="closeModal" v-show="showOkButton" class="btn btn-dark" id="btn_connection_cancel_modal" type="button" data-dismiss="modal">Ok</button>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>
<script lang="ts">
export default{
    name: 'Modal',
    props: {
    title: String,
    text: String,
    modalActive:Boolean,
    showOkButton : Boolean,
    showConfirmButton : Boolean,
    showCloseButton : Boolean,
    backgroundColor: String,
    showLoad : Boolean,
    confirmButtonText : { default : 'Delete', type: String},
    },
    data: () => {
        return {
            load : true,
        }
    },
    mounted(){
        this.load = false;
    },
    updated(){
        this.bodyOverflowModify();
    },
    methods: {
            bodyOverflowModify()
            {
                let body = document.body;
                if(this.modalActive){
                    body.classList.add("modal-open");
                }
                else{
                    body.classList.remove("modal-open");
                }
            },
            closeModal(){
                this.$emit("close");
                },
            cancelModal(){
                this.$emit("cancel");
                },
            okModal(){
                this.$emit("confirm");
            }
        },
}
</script>
<style scoped>
.colorBackgroundModalDelete
{
    background:#b67f80
}
.colorBackgroundModalValidate
{
    background:#799f78
}
.colorBackgroundModalWarning{
    background: #d5c357;
}
.show-modal
{
    display: block;
    padding-right: 17px;
}

.modal-overlay {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 98;
    background-color: rgba(0, 0, 0, 0.3);
}
</style>
