<script setup>
import {Modal} from 'bootstrap'
import {onMounted, ref, watch, useSlots, useAttrs, computed} from 'vue';

//const emit = defineEmits(['open', 'close'])
// const slots = useSlots()
// const attrs = useAttrs()

const props = defineProps({
  show: Number,
  hide: Number,
  size: String,
  needFooter: {
    type: Boolean,
    default: false
  }
})

const refModal = ref(null)

const show = computed(() => {
  return props.show
})

const hide = computed(() => {
  return props.hide
})

let BsModal = null

onMounted(() => {
  BsModal = new Modal(refModal.value)
})

watch(show, async (to, from) => {
  if (to > from) {
    BsModal.show()
  }
})

watch(hide, async (to, from) => {
  if (to > from) {
    BsModal.hide()
  }
})

</script>

<template>
  <div class="modal fade" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" ref="refModal">
    <div class="modal-dialog" :class="size">
      <div class="modal-content">
        <div class="modal-header">
          <slot name="modal-title"></slot>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <slot name="modal-body"></slot>
        </div>
        <div class="modal-footer" v-if="needFooter">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
          <button type="button" class="btn btn-primary">OK</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>
