<template>
    <v-btn icon="mdi-theme-light-dark" @click="toggleTheme" v-tooltip="l.darkMode"></v-btn>
    <v-btn-toggle @update:model-value="changeLang" density="compact" v-model="lang" mandatory rounded="xl" color="white" variant="flat" v-show="langOpts">
        <v-btn size="small" value="bg">BG</v-btn>
        <v-btn size="small" value="en">EN</v-btn>
    </v-btn-toggle>
    <v-btn icon="mdi-translate" @click="langOpts = !langOpts"></v-btn>
    <v-dialog max-width="480">
        <template v-slot:activator="{ props }">
            <v-btn icon="mdi-account" variant="text" v-bind="props"></v-btn>
        </template>
        <template v-slot:default="{ isActive }">
            <v-card class="pa-3" :title="user ? l.profile : l.signin">
                <v-card-text>
                    <Profile v-if="user"></Profile>
                    <Auth v-show="!user" @login-success="isActive.value = false"></Auth>
                </v-card-text>
            </v-card>
        </template>
    </v-dialog>
</template>

<script>
import { useTheme } from 'vuetify'
export default {
    data() {
        return {
            langOpts:false
        }
    },
    created() {
        this.theme = useTheme()
    },
    methods: {
        toggleTheme() {
            this.store.prefs.ui.theme = this.store.prefs.ui.theme == 'dark' ? 'light' : 'dark';
            this.theme.change(this.store.prefs.ui.theme);
        },
        changeLang(v) {
            this.store.prefs.ui.lang = v;
        }
    }
}
</script>