<script setup>
    import { defineProps, ref, nextTick, onMounted } from 'vue';
    import { gsap } from 'gsap';
    import { initFlowbite } from 'flowbite';
    import { marked } from 'marked';

    onMounted(() => {
        initFlowbite();
        faqs[0].categoryContent[0].state = true;
    });

    const faqArticleContainer = ref(null);

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

    const faqs = props.block.faqs || [
        {
            categoryName: 'Kategori 1',
            categoryContent: [
                { question: 'Spørsmål 1', answer: 'Dette er svar på spørsmål 1', state: false },
                { question: 'Spørsmål 2', answer: 'Dette er svar på spørsmål 2', state: false },
                { question: 'Spørsmål 3', answer: 'Dette er svar på spørsmål 3', state: false }
            ]
        },
        {
            categoryName: 'Kategori 2',
            categoryContent: [
                { question: 'Spørsmål 4', answer: 'Dette er svar på spørsmål 4', state: false },
                { question: 'Spørsmål 5', answer: 'Dette er svar på spørsmål 5', state: false },
                { question: 'Spørsmål 6', answer: 'Dette er svar på spørsmål 6', state: false }
            ]
        }
    ];

    const setFalseExcept = (categoryIndex, qaIndex) => {
        faqs.forEach((category, cIdx) => {
            category.categoryContent.forEach((qa, qIdx) => {
                qa.state = cIdx === categoryIndex && qIdx === qaIndex;
            });
        });
    };

    const showFaq = (categoryIndex, qaIndex) => {
        gsap.to(faqArticleContainer.value, {y: 200, opacity: 0, onComplete: () => {
            setFalseExcept(categoryIndex, qaIndex);
            // Wait for the DOM to update
            nextTick().then(() => {
                // Animate new articles in from the right
                gsap.fromTo(faqArticleContainer.value, {y: 200, opacity: 0}, {y: 0, opacity: 1});
            });
        }});
    };

    const stateOf = (categoryIndex, qaIndex) => {
        return faqs[categoryIndex].categoryContent[qaIndex]?.state;
    };
</script>

<template>
    <section :id="block.anchorName" class="relative py-20 md:py-24 overflow-hidden mx-auto max-w-[1280px] bg-black">
        <div class="relative container px-4 mx-auto">
            <div class="max-w-7xl mx-auto">
                <div class="text-center mb-20">
                    <span v-if="block.showlabel" class="inline-block py-1 px-3 mb-4 text-xs font-semibold text-orange-900 bg-orange-50 rounded-full">
                        {{ block.label || 'Skriv inn en tekst for merkelappen' }}
                    </span>
                    <h1 v-if="block.showtitle" class="font-heading text-5xl xs:text-6xl md:text-7xl font-bold text-gray-500">
                        <span>{{ block.title || 'Overskrift' }}&nbsp;</span>
                        <span class="font-serif italic font-normal">{{ block.titlecursive || 'Overskriftkursiv' }}</span>
                    </h1>
                </div>
                <div class="flex flex-wrap -mx-4 -mb-8">
                    <div class="w-full lg:w-1/3 px-4 mb-15 lg:mb-0">
                        <div class="flex flex-wrap -mx-2 lg:flex-col lg:max-w-sm border-b lg:border-b-0 lg:border-r border-gray-100">
                            <div v-for="(faq, index) in faqs" :key="index" class="w-full md:w-1/2 lg:w-full px-2 mb-15">
                                <h4 class="text-2xl font-semibold mb-6 text-amber-600">{{ faq.categoryName }}</h4>
                                <ul class="mb-6">
                                    <li v-for="(category, catIndex) in faq.categoryContent" :key="catIndex" class="mb-6">
                                        <button type="button" @click="showFaq(index, catIndex)" class="flex items-center text-lg hover:text-amber-700" :class="stateOf(index, catIndex) ? 'text-amber-700 font-semibold' : 'text-white font-normal'">
                                            <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="6" cy="6" r="5" stroke="#C3C6CE" stroke-width="2"></circle>
                                            </svg>
                                            <span class="ml-3">
                                                {{ category.question }}
                                            </span>
                                        </button>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="w-full lg:w-2/3 px-4" ref="faqArticleContainer">
                        <template v-for="(faq, index) in faqs" :key="index">
                            <template v-for="(category, catIndex) in faq.categoryContent" :key="catIndex">
                                <div v-show="stateOf(index, catIndex)" class="max-w-xl xl:max-w-3xl mx-auto lg:mr-0">
                                    <h2 class="text-5xl font-semibold text-gray-500 mb-14">{{ category.question }}</h2>
                                    <div v-if="category.answer" v-html="marked(category.answer)" class="text-gray-300">

                                    </div>
                                </div>
                            </template>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

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