<script setup>
    import { Link, usePage } from '@inertiajs/vue3';
    import { onMounted, defineProps, computed, ref, nextTick } from 'vue';
    import { gsap } from 'gsap';
    import { initFlowbite } from 'flowbite';

    const { block, blockData, frontpage } = defineProps({
        block: {
            type: Object,
            required: true,
        },
        blockData: {
            type: Object,
            default: () => ({})
        },
        frontpage: {
            type: Boolean
        }
    });

    onMounted(() => {
        initFlowbite();
    });

    const articlesContainer = ref(null);
    const page = usePage();

    /**
     * Retrieve only 4 event articles
     */

     const limitedArticles = computed(() => blockData.articles.slice(0, 4));
     
    /**
     * Paginate event articles into arrays of 4
     */

    const paginateEventArticles = computed(() => {
        const pageSize = 4;
        return blockData.events.reduce((acc, article, index) => {
            const chunkIndex = Math.floor(index / pageSize);
            if(!acc[chunkIndex]) {
                acc[chunkIndex] = []; // start a new chunk
            }
            acc[chunkIndex].push(article);
            return acc;
        }, []);
    });

    const currentEventPage = ref(0);

    // Use this computed property to get the articles of the current page
    
    const currentArticles = computed(() => paginateEventArticles.value[currentEventPage.value]);

    const nextPage = () => {
        if (currentEventPage.value < paginateEventArticles.value.length - 1) {
            // Animate current articles out to the left
            gsap.to(articlesContainer.value, {x: -100, opacity: 0, onComplete: () => {
                currentEventPage.value++;
                // Wait for the DOM to update
                nextTick().then(() => {
                    // Animate new articles in from the right
                    gsap.fromTo(articlesContainer.value, {x: 100, opacity: 0}, {x: 0, opacity: 1});
                });
            }});
        }
    };

    const prevPage = () => {
        if (currentEventPage.value > 0) {
            // Animate current articles out to the right
            gsap.to(articlesContainer.value, {x: 100, opacity: 0, onComplete: () => {
                currentEventPage.value--;
                // Wait for the DOM to update
                nextTick().then(() => {
                    // Animate new articles in from the left
                    gsap.fromTo(articlesContainer.value, {x: -100, opacity: 0}, {x: 0, opacity: 1});
                });
            }});
        }
    };

    // Check if currentPage is the first page
    const isFirstPage = computed(() => currentEventPage.value === 0);

    // Check if currentPage is the last page
    const isLastPage = computed(() => currentEventPage.value === paginateEventArticles.value.length - 1);
    
    /** Get a node value from json */

    const extractMetaValue = (node, key) => {
        let meta = JSON.parse(node.fs_meta);

        return meta[key];
    };

    /**
     * formatDate
     * 
     * Formats a date string to a Norwegian date format.
     * 
     * @param {
     * } dateString 
     */

    const formatDate = (dateString) => {
        const date = new Date(dateString);
        const day = ('0' + date.getDate()).slice(-2);
        const month = ('0' + (date.getMonth() + 1)).slice(-2);
        const year = date.getFullYear();

        return `${day}/${month}/${year}`;
    };

    /**
     * dateString
     * 
     * Formats a date string to a Norwegian time format.
     * @param {*} dateString 
     */

    const formatTime = (dateString) => {
        const date = new Date(dateString);
        return date.toLocaleTimeString('nb-NO', { hour: '2-digit', minute: '2-digit' });
    };

</script>

<template>
    <section id="events" class="relative block w-full h-screen overflow-hidden">
        <div class="absolute inset-0 bg-cover" :style="{ backgroundImage: `url('${block.image}')` }"></div>
        <div class="absolute inset-0 bg-black opacity-80"></div>
        <div class="absolute p-12 w-full overflow-auto" style="top: 0; bottom: 0;">
            <div class="flex-row justify-center items-center">
                <h1 v-if="block.showtitle" class="text-center text-white font-arctic text-2xl md:text-4xl">{{ block.title || 'Tittel' }}</h1>
                <h2 v-if="block.showlabel" class="text-center text-amber-600 font-serif text-md md:text-xl">{{ block.label || 'Merkelapp' }}</h2>
                <h3 v-if="block.showsecondarylabel && !$page.props.auth.user" class="text-center text-gray-400 font-serif text-sm md:text-md">{{ block.secondarylabel || 'Sekundær merkelapp' }}</h3>
            </div>

            <div class="mx-auto max-w-[1280px]">
                <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-12">
                    <!-- Begin events loop -->
                    <div
                        v-for="(event, index) in blockData.events"
                        :key="event.id"
                        class="max-w-sm rounded-lg shadow-xl bg-gray-800 border-gray-700 relative"
                    >
                        <div class="relative z-0">
                            <Link v-if="event.image_id" :href="route('event', event.slug)">
                                <img class="rounded-t-lg" :src="extractMetaValue(event.image, 'symbolic_name')" :alt="extractMetaValue(event.image, 'title')" />
                                <!-- Badge positioned absolutely within the relative container -->
                                <template v-if="event.capacity">
                                    <div v-if="event.signups.length === 0" class="absolute top-0 right-0 bg-blue-100 text-blue-800 text-sm md:text-md font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400 inline-flex items-center justify-center z-20" style="margin: 0.5rem;">
                                        {{ event.capacity - event.signups.length }} plasser igjen
                                    </div>
                                    <div v-else-if="event.signups.length < (event.capacity / 2)" class="absolute top-0 right-0 bg-green-100 text-green-800 text-sm md:text-md font-medium me-2 px-2.5 py-0.5 rounded border border-green-400 inline-flex items-center justify-center z-20" style="margin: 0.5rem;">
                                        {{ event.capacity - event.signups.length }} plasser igjen
                                    </div>
                                    <div v-else-if="event.signups.length > (event.capacity / 2) && event.signups.length != event.capacity" class="absolute top-0 right-0 bg-yellow-100 text-yellow-800 text-sm md:text-md font-medium me-2 px-2.5 py-0.5 rounded border border-yellow-300 inline-flex items-center justify-center z-20" style="margin: 0.5rem;">
                                        {{ event.capacity - event.signups.length }} plasser igjen
                                    </div>
                                    <div v-else class="absolute top-0 right-0 bg-red-100 text-red-800 text-sm md:text-md font-medium me-2 px-2.5 py-0.5 rounded border border-red-400 inline-flex items-center justify-center z-20" style="margin: 0.5rem;">
                                        Alle plasser er tatt
                                    </div>
                                </template>
                                <div v-else class="absolute top-0 right-0 bg-green-100 text-green-800 text-sm md:text-md font-medium me-2 px-2.5 py-0.5 rounded border-green-400 inline-flex items-center justify-center z-20" style="margin: 0.5rem;">
                                    Ingen plassrestriksjoner
                                </div>
                            </Link>
                        </div>
                        <div class="p-5">
                            <Link :href="route('event', event.slug)">
                                <h5 class="mb-2 text-2xl font-bold tracking-tight text-white">{{ event.title }}</h5>
                            </Link>
                            <p class="text-sm text-green-400 mb-1">
                                Oppstart: {{ formatDate(event.start) }}, klokken {{ formatTime(event.start) }}
                            </p>
                            <p v-if="event.signups.length > 0" class="mb-2 text-xs text-green-200">{{ event.signups.length }} deltager(e) har meldt seg på så langt</p>
                            <p v-else class="mb-2 text-xs text-red-300">Ingen påmeldte så langt</p>
                            <p class="mb-3 font-normal text-gray-400">{{ event.excerpt }}</p>
                            <Link :href="route('event', event.slug)" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg focus:ring-4 focus:outline-none bg-green-600 hover:bg-green-700 focus:ring-green-800">
                                Les mer
                                <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                                </svg>
                            </Link>
                        </div>
                    </div>
                    <!-- End events loop -->
                </div>
            </div>
        </div>
    </section>
</template>