<template>
    <v-app-bar fixed app color="primary" dark>
        <v-btn to="/" text rounded>Simple Notes</v-btn>
        <v-spacer />
        <client-only>
            <v-btn aria-label="theme switcher" icon @click="toggleTheme">
                <v-icon
                    >{{ $vuetify.theme.dark ? mdiBrightness2 : mdiBrightness5 }}
                </v-icon>
            </v-btn>
        </client-only>
        <v-menu bottom left>
            <template v-slot:activator="{ on }">
                <v-btn aria-label="menu" icon v-on="on">
                    <v-icon>{{ mdiDotsVertical }}</v-icon>
                </v-btn>
            </template>

            <v-list>
                <client-only>
                    <v-list-item v-if="isAuthenticated" to="/notes">
                        My notes
                    </v-list-item>
                    <v-list-item v-if="isAuthenticated" @click="logout">
                        Logout
                    </v-list-item>
                    <v-list-item v-else>
                        <v-btn to="/account" text rounded>Account</v-btn>
                    </v-list-item>
                </client-only>
            </v-list>
        </v-menu>
    </v-app-bar>
</template>

<script>
import { mdiDotsVertical, mdiBrightness5, mdiBrightness2 } from '@mdi/js'
import { mapGetters } from 'vuex'

export default {
    name: 'Navbar',
    data: () => ({
        mdiDotsVertical,
        mdiBrightness5,
        mdiBrightness2,
    }),
    computed: {
        ...mapGetters(['isAuthenticated', 'loggedInUser']),
    },
    methods: {
        async logout() {
            await this.$auth.logout()
        },
        toggleTheme() {
            this.$vuetify.theme.dark = !this.$vuetify.theme.dark
            localStorage.setItem(
                'theme',
                this.$vuetify.theme.dark ? 'dark' : 'light'
            )
        },
    },
}
</script>
