<script setup lang="ts">
const queue = usePrintQueue()
</script>

<template>
  <div class="space-y-3">
    <div v-if="queue.operations.value.length === 0" class="text-center py-8">
      <UIcon name="i-heroicons-queue-list" class="w-12 h-12 text-gray-400 dark:text-gray-600 mx-auto mb-2" />
      <p class="text-gray-500 dark:text-gray-400">
        No hay comandos en la cola
      </p>
      <p class="text-sm text-gray-400 dark:text-gray-500">
        Usa el constructor para agregar comandos
      </p>
    </div>

    <TransitionGroup name="list" tag="div" class="space-y-2">
      <QueueQueueItem
        v-for="(op, index) in queue.operations.value"
        :key="index"
        :operation="op"
        :index="index"
        :is-first="index === 0"
        :is-last="index === queue.operations.value.length - 1"
        @update="(newOp) => queue.updateOperation(index, newOp)"
        @remove="queue.removeOperation(index)"
        @move-up="queue.moveOperation(index, 'up')"
        @move-down="queue.moveOperation(index, 'down')"
      />
    </TransitionGroup>
  </div>
</template>

<style scoped>
.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}
.list-move {
  transition: transform 0.3s ease;
}
</style>
