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

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

    const isAdmin: boolean = (usePage().props.isAdmin as boolean)
    const activeKey = ref<string>((usePage().props.request as any)?.url)

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

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

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

    

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

    }

</script>