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

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

    const activeKey: Ref<string> = ref((usePage().props.request as any)?.url)
    const user: User = usePage().props.user as User
    
    console.log(usePage().props.request)

    const menuOptions: MenuOption[] = []

    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)
        }]
    })
    menuOptions.push({
        
    })

    

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

    }

</script>