<script setup>
import Swal from 'sweetalert2';
import { getCurrentInstance, ref, onMounted, onUnmounted, nextTick, computed } from 'vue';
import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue';
import LogoIkea from '@/assets/Ikea_logo.svg';
import {
  FwbNavbar,
  FwbNavbarCollapse,
  FwbNavbarLink,
  FwbNavbarLogo,
} from 'flowbite-vue';

const menu = ref([])
const fetch_menu = async () => {
    try {
        const response = await axios.get(route('menu.user'))
        menu.value = response.data;
    } catch (e) {
        const response = await Swal.fire({
            title: __('are you want to try again') + '?',
            text: __(`${e}`),
            icon: 'question',
            showCancelButton: true,
            showCloseButton: true,
        })

        response.isConfirmed && fetch()
    }
}

onMounted(fetch_menu);
</script>


<template>
    <fwb-navbar>
        <template #logo>
            <fwb-navbar-logo alt="IKEA Price Craweler" :image-url="LogoIkea" :link="route('root')">
                IKEA Price Crawler
            </fwb-navbar-logo>
        </template>

        <template #default="{ isShowMenu }">
            <fwb-navbar-collapse :is-show-menu="isShowMenu" v-if="menu.length >0 ">
                <fwb-navbar-link :link="route(menu[0].route_or_url)" >
                    Home
                </fwb-navbar-link>
                <template v-for="item in menu[0].childs" v-if="menu.length > 0">
                    <fwb-navbar-link :link="route(item.route_or_url)" >
                        {{ item.name }}
                    </fwb-navbar-link>
                </template>
            </fwb-navbar-collapse>
        </template>
    </fwb-navbar>
    <div class="m-3">
        <slot />
    </div>
</template>
<style>
@import 'vue3-easy-data-table/dist/style.css';
</style>
<style src="vue-multiselect/dist/vue-multiselect.css"></style>