<script setup>
    import { Head, Link, router, usePage} from '@inertiajs/vue3';
    import { onMounted, ref } from 'vue';
    import { gsap } from 'gsap';
    import { ScrollTrigger } from 'gsap/ScrollTrigger';
    import { ScrollToPlugin } from 'gsap/ScrollToPlugin';
    import { on } from '@/Components/EventBus.vue';

    import HeroLogoTextRendered from '@/Components/Blocks/Heroes/HeroLogoTextRendered.vue';

    import FAQListRendered from '@/Components/Blocks/FAQ/FAQListRendered.vue';
    import FAQCollapseRendered from '@/Components/Blocks/FAQ/FAQCollapseRendered.vue';
    import FAQCondensedRendered from '@/Components/Blocks/FAQ/FAQCondensedRendered.vue';

    import TwoColumnTextRendered from '@/Components/Blocks/Text/TwoColumnTextRendered.vue';

    import FrontPageMenuHeaderRendered from '@/Components/Blocks/Statics/FrontPageMenuHeaderRendered.vue';
    import FrontPageSponsorsRendered from '@/Components/Blocks/Statics/FrontPageSponsorsRendered.vue';
    import FrontPageMembershipInfoRendered from '@/Components/Blocks/Statics/FrontPageMembershipInfoRendered.vue';
    import FrontPageNewsListRendered from '@/Components/Blocks/Statics/FrontPageNewsListRendered.vue';
    import FrontPageEventsListRendered from '@/Components/Blocks/Statics/FrontPageEventsListRendered.vue';
    import PageFooterRendered from '@/Components/Blocks/Statics/PageFooterRendered.vue';

    const {
        revision,
        images,
        blockData,
        menuLinks
    } = defineProps({
        revision:   { type: Object, required: true },
        images:     { type: Array, default: () => ([]) },
        blockData:  { type: Object, default: () => ({}) },
        menuLinks:  { type: Object, default: () => ({}) }
    });

    gsap.registerPlugin(ScrollToPlugin, ScrollTrigger);

    const useEventBus = ref(false);
    const showMainMenu = ref(false);
    const page = usePage();
    const pageRef = ref();

    /** Get a node value from json */

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

        return meta[key];
    };

    const components = {
        HeroLogoTextRendered,

        FAQListRendered,
        FAQCollapseRendered,
        FAQCondensedRendered,

        TwoColumnTextRendered,

        FrontPageMenuHeaderRendered,
        FrontPageSponsorsRendered,
        FrontPageMembershipInfoRendered,
        FrontPageNewsListRendered,
        FrontPageEventsListRendered,
        PageFooterRendered
    };

</script>

<template>
    <Head :title="revision.title" />

    <div ref="pageRef" class="min-h-screen w-full bg-black">
        <!-- Komponentrendring -->
        <component
            v-for="block in revision.content"
            :key="block.uuid"
            :images="images"
            :is="components[block.renderComponentName]"
            :block="block"
            :blockData="blockData"
            :frontpage="revision.page.main"
        />
    </div>

</template>