<script setup>
    import { defineProps, ref } from 'vue';
    import { v4 as uuidv4 } from 'uuid';

    const props = defineProps({
        title: String,
        blocks: Array
    });

    const open = ref(false)

    const clone = (block) => {
        return {
            ...block,
            uuid: uuidv4()
        };
    };

    function handleDragStart(event, block) {
        event.dataTransfer.setData('application/json', JSON.stringify(block));
    }
</script>

<template>
    <div id="accordion-blocks" data-accordion="collapse">
        <div class="border border-gray-200 dark:border-gray-700 rounded-md">
            <h2>
                <button
                    @click="open = !open"
                    type="button"
                    class="flex items-center justify-between w-full px-4 py-2 font-medium text-left text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700"
                >
                    {{ title }}
                    <svg
                        :class="{ 'rotate-180': open }"
                        class="w-4 h-4 transform transition-transform duration-300"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </button>
            </h2>
            <div v-show="open" class="px-4 pb-4 space-y-4 border-t border-gray-200 dark:border-gray-700">
                <div
                    v-for="block in blocks"
                    :key="block.uuid"
                    class="cursor-move border rounded p-2 bg-white dark:bg-gray-700 shadow hover:bg-gray-50 dark:hover:bg-gray-600"
                    draggable="true"
                    @dragstart="handleDragStart($event, block)"
                >
                    <span class="block text-xs font-medium text-gray-900 dark:text-white">{{ block.description }}</span>
                    <img :src="block.thumbUrl" class="mt-2 w-full object-cover rounded" />
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
    .collapse {
        transition: all 0.3s ease;
    }
</style>