<template>
    <div id="navbar">
        <!-- primary, success, info, warning, danger, dark, or light -->
        <b-navbar toggleable="lg" type="dark" variant="primary">
            <router-link to="/"><b-navbar-brand>Mahjong</b-navbar-brand></router-link>

            <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

            <b-collapse id="nav-collapse" is-nav>
                <b-navbar-nav class="ml-auto">
                    <b-navbar-nav>
                        <b-nav-item href="/">Accueil</b-nav-item>
                    </b-navbar-nav>
                    
                    <b-nav-item-dropdown text="Jeu" right>
                        <b-dropdown-item><router-link to="/gameCreate">Créer une partie</router-link></b-dropdown-item>
                        <b-dropdown-item><router-link to="/gameJoin">Rejoindre une partie</router-link></b-dropdown-item>
                    </b-nav-item-dropdown>

                    <b-nav-item-dropdown text="Statistiques" right>
                        <b-dropdown-item>Mes statistiques</b-dropdown-item>
                        <b-dropdown-item>Meilleurs scores</b-dropdown-item>
                        <b-dropdown-item>Classement</b-dropdown-item>
                    </b-nav-item-dropdown>

                    <b-nav-item-dropdown text="Utilisateur" right>
                        <b-dropdown-item>Profil</b-dropdown-item>
                        <b-dropdown-item @click="onClick">Déconnexion</b-dropdown-item>
                    </b-nav-item-dropdown>
                </b-navbar-nav>
            </b-collapse>
        </b-navbar>
    </div>
</template>

<script>
    export default {
        name: 'Navbar',
        components: {},
        methods: {
            onClick() {
                const href = window.location.href;
                const url = href.substring(0, href.lastIndexOf('/')) + '/'

                if (confirm("Etes-vous sür de vouloir vous déconnecter ?"))
                    window.location.href = url
            }
        }
    };
</script>