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

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

    const emit = defineEmits(['update:block']);
    const local = toRef(props, 'block');

    // Drag state for paragraphs
    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.texts.splice(fromIndex, 1)[0];
        local.value.texts.splice(index, 0, item);
        draggedIndex.value = null;
    };

    function add() {
        local.value.texts.push({
            paragraph: ''
        });
    };

    function remove(index) {
        local.value.texts.splice(index, 1);
    }
    // End drag state functions for paragraphs

    const texts = props.block.texts || [
        { paragraph: 'Trenger du et enkelt og fleksibelt system for å organisere din klubb og klubbaktiviteter, uten å knekke lommeboka? Ønsker du et partnerskap med en utvikler med tilhold i Norge og som er lett tilgjengelig dersom du har behov for oppfølging? Kontakt oss for mer informasjon om hvordan vi kan hjelpe deg og din klubb' }
    ];
</script>

<template>
    <div class="space-y-4">
        <div class="mb-2">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">DOM ID</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.anchorName"
            />
        </div>
        <div class="mb-2">
            <div class="flex">
                <div class="flex items-center h-5">
                    <input 
                        id="title-checkbox" 
                        aria-describedby="title-checkbox-text" 
                        type="checkbox" 
                        v-model="local.showtitle"
                        class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                    >
                </div>
                <div class="ms-2 text-sm">
                    <label for="title-checkbox" class="font-medium text-gray-900 dark:text-gray-300">Vis tittel</label>
                    <p id="title-checkbox-text" class="text-xs font-normal text-gray-500 dark:text-gray-300">Skru tittelen på komponenten av, eller på</p>
                </div>
            </div>
        </div>
        <div class="mb-2">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Tittel tekst</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"
                :disabled="!local.showtitle"
            />
        </div>
        <div class="mb-2">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Tittel kursiv tekst</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.titlecursive"
                :disabled="!local.showtitle"
            />
        </div>

        <div class="mb-2">
            <div class="flex">
                <div class="flex items-center h-5">
                    <input 
                        id="button-checkbox" 
                        aria-describedby="button-checkbox-text" 
                        type="checkbox" 
                        v-model="local.showbutton"
                        class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                    >
                </div>
                <div class="ms-2 text-sm">
                    <label for="button-checkbox" class="font-medium text-gray-900 dark:text-gray-300">Vis knapp</label>
                    <p id="button-checkbox-text" class="text-xs font-normal text-gray-500 dark:text-gray-300">Skru handlingsknappen for komponenten av, eller på</p>
                </div>
            </div>
        </div>
        <div class="mb-2">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Tittel knapp</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.buttontext"
                :disabled="!local.showbutton"
            />
        </div>
        <div class="mb-2">
            <label for="actiontype" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Velg knapp handling</label>
            <select 
                id="actiontype" 
                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                v-model="local.buttonaction"
                :disabled="!local.showbutton"
            >
                <option value="none">Inaktiv</option>
                <option value="newslink">Lenke til nyhetsartikkel</option>
                <option value="eventlink">Lenke til arrangement</option>
                <option value="pagelink">Lenke til en annen side</option>
                <option value="external_link">Ekstern lenke</option>
            </select>
        </div>
        <div v-show="local.buttonaction != 'none'" class="mb-2">
            <label for="address-text" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Adresse</label>
            <input 
                type="email" 
                id="address-text" 
                aria-describedby="address-text-explanation" 
                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" 
                :placeholder="local.buttonaction === 'newslink' ? 'slug-til-nyhetsartikkel'
                    : local.buttonaction === 'eventlink' ? 'slug-til-arrangement'
                    : local.buttonaction === 'pagelink' ? 'slug-til-side'
                    : local.buttonaction === 'external_link' ? 'https://ekstern.lenke.no'
                    : ''"
                :disabled="!local.showbutton"
                v-model="local.buttonlink"
            >
            <p id="address-text-explanation" class="mt-2 text-sm text-gray-500 dark:text-gray-400">Skriv inn enten identifikatoren (slug) til den interne lenken, eller full nettsideadresse hvis det er en ekstern lenke</p>
        </div>

        <div class="mb-2">
            <div class="flex">
                <div class="flex items-center h-5">
                    <input 
                        id="logo-checkbox" 
                        aria-describedby="logo-checkbox-text" 
                        type="checkbox" 
                        v-model="local.showlogo"
                        class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                    >
                </div>
                <div class="ms-2 text-sm">
                    <label for="logo-checkbox" class="font-medium text-gray-900 dark:text-gray-300">Vis logo</label>
                    <p id="logo-checkbox-text" class="text-xs font-normal text-gray-500 dark:text-gray-300">Skru logovisning i komponenten av, eller på</p>
                </div>
            </div>
        </div>

        <div class="space-y-4">
            <h3 class="font-bold text-sm text-gray-800 dark:text-white">
                Tekstparagrafer
            </h3>
        </div>

        <div class="space-y-4">
            <div
                v-for="(text, index) in local.texts"
                :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)"
            >
                <div class="cursor-move mt-1 text-gray-500 dark:text-gray-400">
                    <Icon name="move" class="w-4 h-4" />
                </div>

                <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">Paragraf {{ index + 1 }}</span>
                        <button @click="remove(index)" class="text-red-500 hover:underline text-xs">Fjern</button>
                    </div>

                    <div>
                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400">Tekst</label>
                        <textarea rows="2" 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="text.paragraph"></textarea>
                    </div>
                </div>
            </div>
        </div>

        <button @click="add" class="mt-2 px-4 py-2 bg-blue-600 text-white text-sm rounded hover:bg-blue-700">
            Legg til ny paragraf
        </button>

    </div>
</template>

<style scoped>
/* Optional FAQ list styles */
</style>
