<template>
  <div
    ref="rootElement"
    :class="{
      'tw:border tw:border-dashed tw:border-yellow-400': isDragging,
      'tw:border-blue-200! ': isDragging && isDraggingInsideDropzone,
    }"
    data-dropzone
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import useDragAndDrop, {
  type DroppableConfig,
} from "@racletteOrchestrator/composables/useDragAndDrop"
import { nextTick, onMounted, useTemplateRef, type PropType } from "vue"

const props = defineProps({
  droppableConfig: {
    type: Object as PropType<DroppableConfig>,
    default: () => {},
  },
})

const rootElement = useTemplateRef("rootElement")

const { createDropzone, isDragging, isDraggingInsideDropzone } =
  useDragAndDrop()

onMounted(async () => {
  await nextTick()
  createDropzone(rootElement.value!, props.droppableConfig)
})
</script>
