<script setup>
import { computed } from "vue";
import { useFreeformContext, getPlaceholderPosition } from "../composables/useFreeform";
import { useDropZoneRegistry } from "../composables/useDropZoneRegistry";
const context = useFreeformContext();
const registry = useDropZoneRegistry();
const isVisible = computed(() => {
  const hasDropIndex = context.dropIndex.value !== null;
  if (context.dragState.value.thresholdPassed && hasDropIndex) {
    return true;
  }
  if (context.dragSourceIndex.value === -1 && hasDropIndex) {
    return true;
  }
  return false;
});
const dragCount = computed(() => {
  if (context.dragSourceIndex.value === -1) {
    return registry.hoveredItems.value.length;
  }
  return context.dragState.value.items.length;
});
const placeholderOrder = computed(() => {
  if (context.dropIndex.value === null) return -1;
  if (context.dragSourceIndex.value === -1) {
    return context.dropIndex.value;
  }
  const draggedIds = new Set(context.dragState.value.items.map((i) => i.id));
  return getPlaceholderPosition(context.items.value, context.dropIndex.value, draggedIds);
});
const placeholderSize = computed(() => context.draggedItemSize.value);
</script>

<template>
  <div
    v-if="isVisible"
    class="freeform-placeholder"
    :style="{
  order: placeholderOrder,
  width: placeholderSize ? `${placeholderSize.width}px` : 'auto',
  height: placeholderSize ? `${placeholderSize.height}px` : 'auto',
  minHeight: placeholderSize ? `${placeholderSize.height}px` : void 0,
  maxHeight: placeholderSize ? `${placeholderSize.height}px` : void 0
}"
  >
    <slot
      :count="dragCount"
      :size="placeholderSize"
    >
      <!-- Default placeholder style -->
      <div class="freeform-placeholder__default" />
    </slot>
  </div>
</template>

<style>
.freeform-placeholder{align-self:flex-start!important;box-sizing:border-box;flex-grow:0!important;flex-shrink:0!important;pointer-events:none;position:relative}.freeform-placeholder__default{background:color-mix(in srgb,var(--freeform-color-primary) 10%,transparent);border:2px dashed color-mix(in srgb,var(--freeform-color-primary) 50%,transparent);border-radius:8px;box-sizing:border-box;inset:0;position:absolute}
</style>
