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

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

    const activeKey= ref(usePage().props.request?.url)
    const user = usePage().props.user
    
    const menuOptions = []

    menuOptions.push({
        label: () =>
            h(
                Link, {
                    href: "/events",
                    method: "get"
                },
                () => "Veranstaltungen"
            ),
            key: '/events',
            icon: renderIcon(Events)
    })

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

    menuOptions.push({
        label: "Einstellungen",
        key: "einstellungen",
        icon: renderIcon(Settings),
        children: [{
            label: () => h(
                Link, {
                    href: "/users/"+user.id,
                    method: "get",
                    as: "button"
                },
                () => "Mein Profil"
            ),
            key: 'profile',
            icon: renderIcon(Profile)

        },
        {
            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>