<template>
    <n-menu 
        v-model:value="activeKey" 
        mode="horizontal" 
        :options="menuOptions" 
        class="-mx-4"
    />
</template>

<script setup>
    import { Link, usePage } from '@inertiajs/vue3'
    import { h, ref, watch } from 'vue';
    import { NIcon, NButton } from 'naive-ui'
    import {
        GroupsFilled as Users,
        EventNoteFilled as Events,
        LogOutFilled as Logout
    } from '@vicons/material'

    const { request, isAdmin } = usePage().props
    const activeKey = ref(request.url)

    const menuOptions = ref([])
    menuOptions.value.push({
        label: () =>
            h(
                Link, {
                    href: "/events",
                    methode: "get"
                },
                () => "Veranstaltungen"
            ),
            key: '/events',
            icon: renderIcon(Events)
    })

    if(isAdmin) menuOptions.value.push({
        label: () => 
            h(
                Link, {
                    href: "/users",
                    method: "get"
                },
                () => "Benutzer"
            ),
            key: '/users',
            icon: renderIcon(Users)
    })

    menuOptions.value.push({
        label: () =>
            h(
                Link, {
                    href: "/logout",
                    method: "post",
                    as: "button"
                },
                () => "Abmelden"
            ),
            key: '/logout',
            icon: renderIcon(Logout)
    })

    

    function renderIcon(icon) {
        return () => h(NIcon, null, { default: () => h(icon) })

    }

</script>