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

    import HeroLogoText from '@/Components/Blocks/Heroes/HeroLogoText.vue';
    import HeroLogoTextOptions from '@/Components/Blocks/Heroes/HeroLogoTextOptions.vue';

    import FAQList from '@/Components/Blocks/FAQ/FAQList.vue';
    import FAQListOptions from '@/Components/Blocks/FAQ/FAQListOptions.vue';
    import FAQCollapse from '@/Components/Blocks/FAQ/FAQCollapse.vue';
    import FAQCollapseOptions from '@/Components/Blocks/FAQ/FAQCollapseOptions.vue';
    import FAQCondensed from '@/Components/Blocks/FAQ/FAQCondensed.vue';
    import FAQCondensedOptions from '@/Components/Blocks/FAQ/FAQCondensedOptions.vue';

    import TwoColumnText from '@/Components/Blocks/Text/TwoColumnText.vue';
    import TwoColumnTextOptions from '@/Components/Blocks/Text/TwoColumnTextOptions.vue';

    import FrontPageMenuHeader from '@/Components/Blocks/Statics/FrontPageMenuHeader.vue';
    import FrontPageMenuHeaderOptions from '@/Components/Blocks/Statics/FrontPageMenuHeaderOptions.vue';
    import FrontPageSponsors from '@/Components/Blocks/Statics/FrontPageSponsors.vue';
    import FrontPageSponsorsOptions from '@/Components/Blocks/Statics/FrontPageSponsorsOptions.vue';
    import FrontPageMembershipInfo from '@/Components/Blocks/Statics/FrontPageMembershipInfo.vue';
    import FrontPageMembershipInfoOptions from '@/Components/Blocks/Statics/FrontPageMembershipInfoOptions.vue';
    import FrontPageNewsList from '@/Components/Blocks/Statics/FrontPageNewsList.vue';
    import FrontPageNewsListOptions from '@/Components/Blocks/Statics/FrontPageNewsListOptions.vue';
    import FrontPageEventsList from '@/Components/Blocks/Statics/FrontPageEventsList.vue';
    import FrontPageEventsListOptions from '@/Components/Blocks/Statics/FrontPageEventsListOptions.vue';

    import PageFooter from '@/Components/Blocks/Statics/PageFooter.vue';

    const components = {
        HeroLogoText,
        HeroLogoTextOptions,
        FAQList,
        FAQListOptions,
        FAQCollapse,
        FAQCollapseOptions,
        FAQCondensed,
        FAQCondensedOptions,
        TwoColumnText,
        TwoColumnTextOptions,
        FrontPageMenuHeader,
        FrontPageMenuHeaderOptions,
        FrontPageSponsors,
        FrontPageSponsorsOptions,
        FrontPageMembershipInfo,
        FrontPageMembershipInfoOptions,
        FrontPageNewsList,
        FrontPageNewsListOptions,
        FrontPageEventsList,
        FrontPageEventsListOptions,
        PageFooter
    }

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

        images: {
            type: Array
        }
    });

    const emit = defineEmits(['delete']);

    const showDrawer = ref(false);

    const toggleDrawer = () => {
        showDrawer.value = !showDrawer.value;
        emit('drawer-state', showDrawer.value);
    };

    const isStatic = computed(() => props.block.static === true);
    
</script>

<template>
    <div class="relative group border rounded-md p-4 bg-black dark:bg-gray-800">
        <!-- Render the actual block -->
        <component :images="images" :is="components[block.componentName]" :block="block" />

        <!-- Floating toolbar -->
        <div class="absolute top-0 left-0 flex flex-col space-y-1 p-1 bg-gray-700 rounded-tr-md rounded-br-md text-white z-10">
            <!-- Drag handle -->
            <div class="cursor-move handle p-1 hover:bg-gray-600 rounded">
                <Icon name="move" class="h-4 w-4" />
            </div>

            <!-- Open options drawer -->
            <button :disabled="isStatic" @click="toggleDrawer" class="p-1 hover:bg-gray-600 rounded">
                <Icon name="settings" class="h-4 w-4" />
            </button>

            <!-- Delete block -->
            <button @click="emit('delete')" class="p-1 hover:bg-red-600 text-red-300 rounded">
                <Icon name="trash" class="h-4 w-4" />
            </button>
        </div>
    </div>

    <!-- Options drawer -->
    <teleport to="body">
        <div v-if="showDrawer" class="fixed inset-0 z-50 bg-black/50 flex">
            <div class="bg-white dark:bg-gray-800 w-96 max-w-full h-full shadow-lg p-4 overflow-y-auto">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Blokkinnstillinger</h2>
                    <button @click="toggleDrawer" class="text-gray-500 hover:text-red-500 dark:text-gray-300 dark:hover:text-red-400">
                        ✕
                    </button>
                </div>

                <component
                    :is="components[block.optionsComponentName]"
                    :block="block"
                    :images="images"
                />
            </div>

            <div class="flex-1" @click="toggleDrawer"></div>
        </div>
    </teleport>
</template>

<style scoped>
/* Optional styling tweaks */
</style>
