<template>
    <div>
        <NavigationMenu>
            <NavigationMenuList class="justify-around gap-20">
                <NavigationMenuItem>
                    <NavigationMenuTrigger>Testing</NavigationMenuTrigger>
                    <NavigationMenuContent>
                        <li>
                            <NavigationMenuLink as-child>
                                <RouterLink to="/testing/laravel">Laravel</RouterLink>
                            </NavigationMenuLink>
                            <NavigationMenuLink as-child>
                                <RouterLink to="/testing/websockets">Web Sockets</RouterLink>
                            </NavigationMenuLink>
                        </li>
                    </NavigationMenuContent>
                </NavigationMenuItem>

                <NavigationMenuItem v-if="!userLoggedIn">
                    <NavigationMenuLink>
                        <RouterLink to="/login">Login</RouterLink>
                    </NavigationMenuLink>
                </NavigationMenuItem>

                <NavigationMenuItem v-else>
                    <NavigationMenuLink>
                        <a href="/home" @click.prevent="logoutClickHandler" class="cursor-pointer">Logout</a>
                    </NavigationMenuLink>
                    <NavigationMenuLink>
                        <RouterLink to="/user">Profile</RouterLink>
                    </NavigationMenuLink>
                </NavigationMenuItem>
            </NavigationMenuList>
        </NavigationMenu>
    </div>
</template>

<script setup>
import { useBiscaStore } from '@/stores/bisca'
import {
    NavigationMenu,
    NavigationMenuContent,
    NavigationMenuItem,
    NavigationMenuLink,
    NavigationMenuList,
    NavigationMenuTrigger,
} from '@/components/ui/navigation-menu'
import router from '@/router';

const emits = defineEmits(['logout'])
const { userLoggedIn } = defineProps(['userLoggedIn'])

const biscaStore = useBiscaStore()

const logoutClickHandler = () => {
    if (biscaStore.isGameRunning) {
        const confirmLogout = window.confirm(
            '⚠️ Jogo em Progresso!\n\nSe fizeres Logout agora, perderás o jogo atual e serás considerado PERDEDOR.\n\nQueres mesmo sair?'
        )
        if (!confirmLogout) return

        biscaStore.isLoggingOut = true

        biscaStore.quitGame()

        return
    }

    emits('logout')

    router.push({ name: 'home' }) 
}
</script>