const menuCategories = Vue.createApp({
    data() {
        return {
            categories: [],
            categoryPath: `${vueData.homeUrl}/products?category=`,
            catGroupsData: vueData.transientApiData,
            isActivePremiumMember: vueData.isActivePremiumMember,
            firstPremiumCategorySlug: null, // Initialize the variable here
            homeURL: vueData.homeUrl,
        };
    },
    template: `
        <li class="menu-item nav-item custom-item">
            <a :href="homeURL" class="nav-link">Home</a>
        </li>    
        <li class="menu-item menu-item-has-children dropdown nav-item custom-item">
            <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="dropdown-toggle nav-link">Products</a>
            <ul class="dropdown-menu" role="menu">
                <li v-for="category in categories" :key="category" class="menu-item nav-item">
                    <a class="dropdown-item" :href="categoryPath + category.slug">{{ category.name }}</a>
                </li>
            </ul>
        </li>
        <li v-if="isPremiumMember && firstPremiumCategorySlug" class="menu-item nav-item custom-item">
            <a :href="categoryPath + firstPremiumCategorySlug" class="nav-link">Premium</a>
        </li>
        <li class="menu-item nav-item custom-item catalog-menu-tab d-none">
            <a :href="homeURL +'/catalog' " class="nav-link">Catalog</a>
        </li>
    `,
    created() {
        this.fetchCategories();
    },
    computed: {
        isPremiumMember() {
            return this.isActivePremiumMember;
        },
    },
    methods: {
        fetchCategories() {
            const { group_data } = this.catGroupsData;

            if (group_data) {
                const categories = group_data.flatMap(group => {
                    const categoryGroup = group.categoryGroup;

                    if (categoryGroup && categoryGroup.categoryGroupCategories) {
                        return categoryGroup.categoryGroupCategories
                            .filter(groupCategory => {
                                if (groupCategory.category.slug.includes('premium') && !this.firstPremiumCategorySlug) {
                                    this.firstPremiumCategorySlug = groupCategory.category.slug;
                                }
                                return !groupCategory.category.slug.includes('premium');
                            })
                            .map(groupCategory => groupCategory.category);
                    }
                    return [];
                });

                this.categories = categories;
            }
        },
    },
});

menuCategories.mount('#catalog-menu');