<template>
  <Teleport to="body">
    <!-- modal -->
    <div v-if="modelValue" class="modal fade show d-block" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">

          <!-- HEADER -->
          <div v-if="showHeader" class="modal-header">
            <h4 class="modal-title">{{ modalTitle }}</h4>
            <h4 class="cursor-pointer" @click="$emit('update:modelValue', false)">×</h4>
          </div>

          <!-- BODY -->
          <div class="modal-body">
            <slot />
            <!-- If string, render as text; if component/VNode, render directly -->
            <template v-if="isString">
              <div v-html="body"></div>
            </template>
            <template v-else-if="body">
              <component :is="body" />
            </template>
          </div>

          <!-- FOOTER -->
          <div class="modal-footer w-100">
            <slot name="footer" />
            <button v-if="footerClose && !$slots.footer" class="btn btn-primary w-100 py-2 rounded-3 shadow-sm fw-bold" @click="$emit('update:modelValue', false)">
              OK
            </button>
          </div>

        </div>
      </div>
    </div>

    <!-- backdrop -->
    <div v-if="modelValue" class="modal-backdrop fade show"></div>
  </Teleport>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  modelValue: Boolean,
  modalTitle: [String, Boolean],
  body: [String, Object], // support string or VNode/component
  footerClose: { type: Boolean, default: true }
})

const showHeader = computed(() => props.modalTitle !== false)
const isString = computed(() => typeof props.body === 'string')
</script>

<style scoped>
.modal {
  z-index: 30001;
}

.modal-content {
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.modal-body {
  overflow-y: auto;
  flex: 1;
}

.modal-backdrop {
  z-index: 30000;
}

.modal-dialog {
  z-index: 30002;
  margin-top: 5vh;
}

.modal-title {
  margin: 0;
  font-weight: 700;
}

.modal-header h4:last-child {
  font-size: 24px;
  line-height: 1;
  color: #999;
  transition: color 0.2s;
}

.modal-header h4:last-child:hover {
  color: #333;
}
</style>