<script setup>
const props = defineProps({
  id: String,
  component: String,
  title: String,
  width: String,
  height: String,
  vbind: Object,
  onClose: Function,
  onEvent: Function,
});

const componentFiles = import.meta.glob("@/components/**/*.vue");
const resolvedComponent = shallowRef(null);

function loadDynamicComponent() {
  if (!props.component) {
    resolvedComponent.value = null;
    return;
  }

  const fullPath = `/components/${props.component}.vue`;
  const componentPath = Object.keys(componentFiles).find((path) => path.endsWith(fullPath));

  if (componentPath) {
    resolvedComponent.value = defineAsyncComponent(componentFiles[componentPath]);
  } else {
    console.error(`Không tìm thấy component tại: ${fullPath}`);
    resolvedComponent.value = null;
  }
}

// Theo dõi sự thay đổi của props.component để load lại nếu cần
watchEffect(() => {
  loadDynamicComponent();
});

const handleEvent = (id, eventName, data) => props.onEvent(id, eventName, data);
</script>

<template>
  <div>
    <div
      :id="id"
      class="modal is-active has-text-text-20"
      @click="
        (e) => {
          if (e.target.classList.contains('modal-background')) props.onClose(id);
        }
      "
    >
      <div class="modal-background"></div>
      <div
        class="modal-card"
        :style="{
          // width: $store.viewport <= 2 ? 'calc(100% - 2rem)' : width || '60%',
        }"
      >
        <header
          v-if="title"
          class="modal-card-head px-4 py-3"
        >
          <div class="w-full">
            <div class="field is-grouped is-align-items-center">
              <div class="control is-expanded has-text-left">
                <p
                  class="fs-17 font-semibold has-text-primary"
                  v-html="title"
                ></p>
              </div>
              <div class="control has-text-right">
                <button
                  class="delete is-medium"
                  @click="onClose(id)"
                ></button>
              </div>
            </div>
          </div>
        </header>
        <section
          class="modal-card-body p-4"
          :style="{
            minHeight: height || '750px',
          }"
        >
          <component
            :is="resolvedComponent"
            v-bind="vbind"
            @close="onClose(id)"
            @event="(e) => handleEvent(id, e.name, e.data)"
          />
        </section>
        <footer class="modal-card-foot pt-0 px-4 pb-4"></footer>
      </div>
    </div>
  </div>
</template>
