<script setup>
    import Icon from '@/Components/Icon.vue'
    import { ref, toRef, watch } from 'vue';

    const props = defineProps({
        block: { type: Object, required: true }
    });

    const emit = defineEmits(['update:block']);

    const local = toRef(props, 'block');

    // Drag state
    const draggedIndex = ref(null);

    function handleDragStart(event, index) {
        draggedIndex.value = index;
        event.dataTransfer.effectAllowed = 'move';
        event.dataTransfer.setData('text/plain', index);
    };

    function handleDragOver(event) {
        event.preventDefault();
        event.dataTransfer.dropEffect = 'move';
    };

    function handleDrop(event, index) {
        event.preventDefault();
        const fromIndex = draggedIndex.value;
        if (fromIndex === null || fromIndex === index) return;

        const item = local.value.faqs.splice(fromIndex, 1)[0];
        local.value.faqs.splice(index, 0, item);
        draggedIndex.value = null;
    };

    // End drag state

    watch(local, (val) => {
        emit('update:block', val);
    }, { deep: true });

    function addFaq() {
        local.value.faqs = local.value.faqs || [];
        local.value.faqs.push({ question: '', answer: '' });
    };

    function removeFaq(index) {
        local.value.faqs.splice(index, 1);
    };
</script>

<template>
    <div class="space-y-4">
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Tittel for seksjonen</label>
            <input
                type="text"
                class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:text-white"
                v-model="local.title"
            />
        </div>

        <div class="space-y-4">
            <div
                v-for="(faq, index) in local.faqs"
                :key="index"
                class="flex items-start gap-2 p-4 rounded border dark:border-gray-600 bg-gray-50 dark:bg-gray-800"
                draggable="true"
                @dragstart="handleDragStart($event, index)"
                @dragover="handleDragOver"
                @drop="handleDrop($event, index)"
            >
                <!-- Drag handle -->
                <div class="cursor-move mt-1 text-gray-500 dark:text-gray-400">
                    <Icon name="move" class="w-4 h-4" />
                </div>

                <!-- Content -->
                <div class="flex-1 space-y-2">
                    <div class="flex justify-between items-center">
                        <span class="text-sm font-semibold text-gray-700 dark:text-gray-300">FAQ {{ index + 1 }}</span>
                        <button @click="removeFaq(index)" class="text-red-500 hover:underline text-xs">Fjern</button>
                    </div>

                    <div class="mb-2">
                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400">Spørsmål</label>
                        <input type="text" class="block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:text-white" v-model="faq.question" />
                    </div>

                    <div>
                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400">Svar</label>
                        <textarea rows="2" class="block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:text-white" v-model="faq.answer"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
