<script setup>
import { computed, onMounted, onUnmounted, ref } from "vue";
import { useDropZoneRegistry } from "../composables/useDropZoneRegistry";
const props = defineProps({
  id: { type: String, required: false },
  accept: { type: Function, required: false }
});
const registry = useDropZoneRegistry();
const elementRef = ref(null);
const zoneId = props.id || `dropzone-${Math.random().toString(36).slice(2, 9)}`;
const isOver = computed(() => registry.hoveredZoneId.value === zoneId);
const isAccepted = computed(() => {
  if (!isOver.value) return false;
  if (registry.targetContainerId.value) return true;
  if (!props.accept) return true;
  return props.accept(registry.hoveredItems.value);
});
const items = computed(() => isOver.value ? registry.hoveredItems.value : []);
const count = computed(() => items.value.length);
onMounted(() => {
  if (elementRef.value) {
    registry.register(zoneId, elementRef.value, props.accept);
  }
});
onUnmounted(() => {
  registry.unregister(zoneId);
});
defineExpose({
  zoneId,
  isOver,
  isAccepted,
  items,
  count
});
</script>

<template>
  <div
    ref="elementRef"
    class="freeform-dropzone"
    :class="{
  'freeform-dropzone--over': isOver,
  'freeform-dropzone--accepted': isOver && isAccepted,
  'freeform-dropzone--rejected': isOver && !isAccepted
}"
    :data-dropzone-id="zoneId"
  >
    <slot
      :is-over="isOver"
      :is-accepted="isAccepted"
      :items="items"
      :count="count"
    />
  </div>
</template>

<style>
.freeform-dropzone{position:relative}
</style>
