<script setup>
import { computed } from 'vue';

const props = defineProps({
  components: Array,
  componentMap: Object // New prop for the component map
})

const hoveredComponent = ref(null); // To store the component data being hovered
const previewPosition = reactive({ x: 0, y: 0 }); // Position for the floating preview

const groupedComponents = computed(() => {
  return props.components.reduce((acc, component) => {
    const group = component.group || 'General';
    if (!acc[group]) {
      acc[group] = [];
    }
    acc[group].push(component);
    return acc;
  }, {});
});

const isDragging = ref(false); // To prevent preview during drag

function onDragStart(event, component) {
  isDragging.value = true; // Set dragging flag
  hoveredComponent.value = null; // Hide preview immediately on drag start
  event.dataTransfer.dropEffect = 'move'
  event.dataTransfer.effectAllowed = 'move'
  event.dataTransfer.setData('application/json', JSON.stringify(component))
  event.dataTransfer.setData('text/plain', 'new-component')
}

// Function to handle drag end and reset isDragging flag
function onDragEnd() {
  isDragging.value = false;
}

function onMouseEnterComponent(event, component) {
  if (isDragging.value) return; // Don't show preview if dragging
  hoveredComponent.value = component;
  updatePreviewPosition(event);
}

function onMouseLeaveComponent() {
  hoveredComponent.value = null;
}

function onMouseMove(event) {
  if (hoveredComponent.value && !isDragging.value) {
    updatePreviewPosition(event);
  }
}

function updatePreviewPosition(event) {
  previewPosition.x = event.clientX + 20; // Offset from cursor
  previewPosition.y = event.clientY + 20; // Offset from cursor
}

onMounted(() => {
  document.addEventListener('mousemove', onMouseMove);
});

onUnmounted(() => {
  document.removeEventListener('mousemove', onMouseMove);
});
</script>

<template>
  <aside class="component-library">
    <h3>Components</h3>
    <div v-for="(group, groupName) in groupedComponents" :key="groupName" class="component-group">
      <h4>{{ groupName }}</h4>
      <ul>
        <li
          v-for="component in group"
          :key="component.id"
          draggable="true"
          @dragstart="onDragStart($event, component)"
          @dragend="onDragEnd"
          @mouseenter="onMouseEnterComponent($event, component)"
          @mouseleave="onMouseLeaveComponent"
        >
          {{ component.name }}
        </li>
      </ul>
    </div>

    <!-- Floating Preview Component -->
    <div 
      v-if="hoveredComponent && !isDragging"
      class="component-preview"
      :style="{ left: previewPosition.x + 'px', top: previewPosition.y + 'px' }"
    >
      <div class="preview-content">
        <component 
          :is="componentMap[hoveredComponent.type]" 
          :component="{ 
            ...hoveredComponent, 
            style: { 
              ...hoveredComponent.defaults.style, 
              width: '100px', 
              height: 'auto', // Adjust height automatically
              minHeight: '30px' // Ensure minimum height
            },
            props: hoveredComponent.defaults.props
          }"
        />
      </div>
    </div>
  </aside>
</template>

<style scoped>
.component-library {
  width: 240px;
  padding: 1.5rem;
  background-color: var(--panel-color);
  border-right: 1px solid var(--border-color);
  box-sizing: border-box;
  overflow-y: auto;
}
h3 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-color-darker);
}
.component-group h4 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-color-darker);
  text-transform: capitalize;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color);
  margin-bottom: 0.75rem;
  cursor: grab;
  text-align: center;
  background-color: var(--bg-color);
  border-radius: var(--border-radius);
  font-weight: 500;
  transition: background-color 0.2s, border-color 0.2s;
  color: var(--text-color); /* Ensure text color is visible */
}
li:hover {
  background-color: var(--accent-color); /* Highlight on hover */
  border-color: var(--accent-color);
}

.component-preview {
  position: fixed; /* Use fixed positioning for the preview */
  z-index: 9999; /* Ensure it's on top */
  pointer-events: none; /* Make it non-interactive */
  background-color: var(--panel-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: 10px;
  width: 150px; /* Fixed width for preview */
  height: auto;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preview-content {
  width: 100%;
  height: 100%;
  transform: scale(0.8); /* Slightly scale down content within preview */
  transform-origin: top left;
  box-sizing: border-box;
}
</style>
