<template>
    <v-app-bar color="primary" scroll-behavior="elevate" scroll-threshold="20">
        <!-- <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon> -->
        <v-app-bar-title>ProNature Administrative Console</v-app-bar-title>
        <v-menu>
            <template v-slot:activator="{ props }">
                <v-btn icon="mdi-plus" variant="text" v-bind="props"></v-btn>
            </template>
            <v-list>
                <v-list-item to="/game-objects/add">{{ l.createGameObject }}</v-list-item>
                <v-list-item to="/scenarios/add">{{ l.createScenario }}</v-list-item>
                <v-list-item to="/games/add">{{ l.createGame }}</v-list-item>
            </v-list>
        </v-menu>
    </v-app-bar>

    <v-navigation-drawer class="bg-secondary" expand-on-hover rail>
        <v-list>
            <v-list-item prepend-avatar="/logo.webp" subtitle="Admin Console" title="ProNature"></v-list-item>
        </v-list>
        <v-divider></v-divider>
        <v-list nav>
            <v-list-item prepend-icon="mdi-database" to="/game-objects/list" :title="l.gameObjects"></v-list-item>
            <v-list-item prepend-icon="mdi-receipt-text-edit-outline" to="/scenarios/list" :title="l.gameScenarios"></v-list-item>
            <!-- <v-list-item prepend-icon="mdi-cogs" :title="l.gameRules"></v-list-item> -->
            <v-divider></v-divider>
            <v-list-item prepend-icon="mdi-controller" :title="l.games" to="/games/list"></v-list-item>
            <v-list-item prepend-icon="mdi-cog-play" :title="l.preview" to="/preview/list"></v-list-item>
            
        </v-list>
        <v-divider></v-divider>
        <v-list nav>
            <v-list-item @click="toggleTheme" prepend-icon="mdi-theme-light-dark" :title="l.darkMode"></v-list-item>
            <v-list-item prepend-icon="mdi-translate">
                <v-btn-toggle density="compact" v-model="lang" rounded="xl" color="white" variant="outlined">
                    <v-btn size="small" value="bg">BG</v-btn>
                    <v-btn size="small" value="en">EN</v-btn>
                </v-btn-toggle>
            </v-list-item>
        </v-list>
    </v-navigation-drawer>
</template>

<script setup>
import { useTheme } from 'vuetify'
const theme = useTheme()

function toggleTheme () {
  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
}
</script>