<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { useOrderPriorityStore } from '@/stores/orderPriority';

const orderPriorityStore = useOrderPriorityStore();

// โหลดลำดับความสำคัญทั้งหมดเมื่อ component mount
onMounted(() => {
  orderPriorityStore.fetchWithFilter();
});

const orders = computed(() => {
  return orderPriorityStore.priorities
    .sort((a, b) => a.priority - b.priority)
    .map((p) => ({
      id: p.order.OrderID,
      name: `ORDER${p.order.OrderID}`,
      orderPriorityID: p.orderPriorityID,
    }));
});

const draggedOrder = ref<{ id: number; orderPriorityID: number } | null>(null);

const handleDragStart = (order: any) => {
  draggedOrder.value = order;
};

const handleDragOver = (event: DragEvent) => {
  event.preventDefault();
};

const handleDrop = async (targetOrder: any) => {
  if (!draggedOrder.value || draggedOrder.value.id === targetOrder.id) return;

  const draggedIndex = orders.value.findIndex((o) => o.id === draggedOrder.value!.id);
  const targetIndex = orders.value.findIndex((o) => o.id === targetOrder.id);

  const updatedList = [...orders.value];
  const [moved] = updatedList.splice(draggedIndex, 1);
  updatedList.splice(targetIndex, 0, moved);

  const payload = {
    configs: updatedList.map((order, index) => ({
      id: order.orderPriorityID,
      priority: index + 1,
    })),
  };
  await orderPriorityStore.updateMany(payload);
  
  draggedOrder.value = null;
};
</script>

<template>
  <v-card class="pa-5" style="background-color: #333647; border-radius: 15px; min-height: 280px;">
    <p class="text-center font-weight-bold mb-2" style="color: white; font-size: 20px;">
      ลำดับความสำคัญ
    </p>

    <transition-group name="list" tag="div">
      <div v-for="order in orders" :key="order.id" class="order-item" draggable="true"
        @dragstart="() => handleDragStart(order)" @dragover="handleDragOver" @drop="() => handleDrop(order)">
        {{ order.name }}
      </div>
    </transition-group>
  </v-card>
</template>


<style scoped>
.order-item {
  background-color: white;
  color: black;
  padding: 10px;
  margin-bottom: 8px;
  text-align: center;
  cursor: move;
  user-select: none;
  border-radius: 5px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.order-item:hover {
  opacity: 0.9;
}

.order-item:active {
  transform: scale(1.05);
}

.list-move {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.list-enter-active,
.list-leave-active {
  transition: opacity 0.3s, transform 0.3s;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style>