<script lang="ts" setup>
// types

type Props = {
    isOpen: boolean;
    items: {
        title: string;
        subitems: {
            title: string;
            link: string;
        }[];
    }[];
};

// props

const props = defineProps<Props>();
const { items, isOpen } = toRefs(props);

// emits

const emit = defineEmits(["update:isOpen"]);

// states

const selectedItem = ref(0);
const selectTabTimer = ref<NodeJS.Timeout | null>(null);

const isScrollLocked = useScrollLock(window);

const navbarEl = ref<HTMLElement | null>(null);
const { height: navbarHeight } = useElementSize(navbarEl);

// computed

const selectedItemSubItems = computed(() => {
    if (items.value.length > 0) {
        return items.value[selectedItem.value].subitems;
    }

    return [];
});

// methods

const menuTabMouseEnter = (index: number) => {
    if (selectTabTimer.value) clearTimeout(selectTabTimer.value);
    selectTabTimer.value = setTimeout(() => {
        selectedItem.value = index;
    }, 150);
};

const menuTabMouseLeave = () => {
    if (selectTabTimer.value) clearTimeout(selectTabTimer.value);
    selectTabTimer.value = null;
};

// watches

watch(
    isOpen,
    (newValue) => {
        isScrollLocked.value = newValue;

        if (!newValue) {
            selectedItem.value = 0;
        }
    },
    {
        immediate: true,
    }
);

// lifecycle

onMounted(() => {
    navbarEl.value = document.querySelector("#header-navbar");
});
</script>

<template>
    <Transition
        name="fade"
        mode="out-in"
    >
        <div
            v-if="isOpen"
            :style="{ marginTop: `${navbarHeight}px` }"
            class="fixed right-0 top-0 w-full z-999 bg-black/50 h-svh border-t border-slate-200"
        >
            <div
                class="flex h-200 bg-white"
                @mouseleave="$emit('update:isOpen', false)"
            >
                <div class="bg-slate-100 p-4 flex flex-col overflow-y-auto mask-b-from-90% pb-8">
                    <button
                        v-for="(item, index) in items"
                        :key="item.title"
                        class="text-black transition-all p-4 rounded-xl cursor-default"
                        :class="index === selectedItem ? 'bg-blue-100 text-blue-500' : 'bg-slate-100'"
                        :id="`mega-menu-tab-${index}`"
                        @mouseenter="menuTabMouseEnter(index)"
                        @click="selectedItem = index"
                        @mouseleave="menuTabMouseLeave"
                    >
                        {{ item.title }}
                    </button>
                </div>
                <div class="overflow-y-auto w-full mask-b-from-90% pb-8">
                    <Transition
                        name="fade"
                        mode="out-in"
                        :duration="150"
                    >
                        <div
                            :key="selectedItem"
                            class="grid grid-cols-4 p-4 text-back w-full h-fit"
                            :style="{
                                // gridTemplateRows: 'repeat(5, auto)',
                                // justifyContent: 'center',
                            }"
                        >
                            <NuxtLink
                                v-for="item in selectedItemSubItems"
                                :to="'https://google.com'"
                                class="p-4 whitespace-nowrap h-fit text-slate-500 flex items-center justify-between hover:text-blue-500 hover:-translate-x-1.5 transition-all"
                            >
                                <span class="truncate w-[90%]">
                                    {{ item.title }}
                                </span>
                            </NuxtLink>
                        </div>
                    </Transition>
                </div>
            </div>
        </div>
    </Transition>
</template>
