<script setup>
// ListGroup components removed - using custom implementation
import { computed, onMounted, ref, useTemplateRef, watch } from 'vue';
import draggable from 'vuedraggable';


const props = defineProps({
    list1: Array,
    list2: Array
});

const item1 = {
    id: 1,
    name: 'Item 1'
}

const item2 = {
    id: 2,
    name: 'Item 2'
}

const item3 = {
    id: 3,
    name: 'Item 3'
}

const isDragging = ref(false);

let containerOne = ref([item1, item2])
let containerTwo = ref([item3])

const dragOptions = computed(() => {
    return {
        animation: 200,
        group: "actions",
        disabled: false,
        ghostClass: "ghost"
    }
});

const removeAt = (idx, targeContainer) => {
    targeContainer.splice(idx, 1);
};

watch(
    () => containerOne.value,
    (value) => {
        console.log(value)
    },
    { deep: true }
);

</script>
<template>
    <div class="grid grid-cols-4 gap-4">
        <draggable 
            class="list-group"
            :list="containerOne" 
            item-key="id"
            :component-data="{
                tag: 'ul',
                type: 'transition-group',
                name: !isDragging ? 'flip-list' : null
            }"
            v-bind="dragOptions"
            @start="isDragging = true"
            @end="isDragging = false"
            group="actions"
        >
            <template #item="{element, index}">
                <li class="flex justify-between items-center p-2 bg-white border border-gray-200 rounded-md mb-1 hover:bg-gray-50 transition-colors">
                    <span class="text">{{ element.name }} </span>
                    
                    <button type="button" class="cursor-pointer p-1 hover:bg-gray-100 rounded" @click="removeAt(index, containerOne)"><svg class="w-6 h-6 text-gray-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>
                    </svg></button>
                </li>
            </template>
        </draggable>
        <draggable 
            class="list-group"
            :list="containerTwo"
            :component-data="{
                tag: 'ul',
                type: 'transition-group',
                name: !isDragging ? 'flip-list' : null
            }"
            item-key="id"
            v-bind="dragOptions"
            @start="isDragging = true"
            @end="isDragging = false"
            group="actions"
        >
            <template #item="{element, index}">
                <li class="flex justify-between items-center p-2 bg-white border border-gray-200 rounded-md mb-1 hover:bg-gray-50 transition-colors">
                    <span class="text">{{ element.name }} </span>

                    <button type="button" class="cursor-pointer p-1 hover:bg-gray-100 rounded" @click="removeAt(index, containerOne)"><svg class="w-6 h-6 text-gray-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>
                    </svg></button>
                </li>
            </template>
        </draggable>
    </div>
</template>
<style lang="css">
.button {
  margin-top: 35px;
}

.flip-list-move {
  transition: transform 0.5s;
}

.no-move {
  transition: transform 0s;
}

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

.list-group {
  min-height: 20px;
}

.list-group-item {
  cursor: move;
}

.list-group-item i {
  cursor: pointer;
}
</style>
