<script setup>
import { twMerge } from "tailwind-merge";
import { defineProps } from "vue";

const props = defineProps({
  id: String,
  title: String,
  onCancel: Function,
  modalClass: String,
  width: Number || String,
  draggable: { type: Boolean, default: false },
  backdrop: { type: Boolean, default: true },
  modalStyle: { type: Object, default: () => ({}) },
});
</script>

<template>
  <dialog
    :id="id"
    :class="
      twMerge(
        'modal',
        backdrop ? '' : 'focus-visible:outline-none backdrop:bg-transparent'
      )
    "
    :style="modalStyle"
    v-draggable="
      draggable ? { handle: '[data-drag-handle]', target: '.modal-box' } : false
    "
  >
    <div
      :class="
        twMerge(
          'modal-box static rounded-md border border-info py-5 px-6 overflow-y-auto bg-normal',
          modalClass
        )
      "
      :style="{ maxWidth: isNaN(width) ? width : `${width}px` }"
    >
      <!-- 把手：只在這裡按下才可拖動 -->
      <div class="text-2xl font-bold select-none" data-drag-handle>
        <slot name="modalTitle">{{ title }}</slot>
      </div>

      <div class="min-h-[200px]">
        <slot name="modalContent"></slot>
      </div>

      <div class="modal-action relative">
        <slot name="modalAction"></slot>
      </div>
    </div>

    <form v-if="backdrop" method="dialog" class="modal-backdrop">
      <button
        @click="
          () => {
            onCancel && onCancel();
          }
        "
      >
        close
      </button>
    </form>
  </dialog>
</template>
