<template>
    <v-app-bar fixed app color="primary">
        <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 transition="scroll-y-transition" offset-y 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>
                <v-list-item
                    v-if="loggedIn && !$route.path.includes('/notes')"
                    to="/notes"
                >
                    My notes
                </v-list-item>
                <v-list-item v-if="loggedIn" @click="logout">
                    Logout
                </v-list-item>
                <v-list-item v-else>
                    <v-btn to="/account" text rounded>Account</v-btn>
                </v-list-item>
            </v-list>
        </v-menu>
    </v-app-bar>
</template>

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

export default {
    name: 'Navbar',
    data: () => ({
        mdiDotsVertical,
        mdiBrightness5,
        mdiBrightness2,
    }),
    computed: {
        ...mapState('auth', ['loggedIn']),
    },
    methods: {
        async logout() {
            await this.$auth.logout()
        },
        toggleTheme() {
            this.$vuetify.theme.dark = !this.$vuetify.theme.dark
            const theme = this.$vuetify.theme.dark ? 'dark' : 'light'
            localStorage.setItem('theme', theme)
            this.$cookies.set('theme', theme, {
                path: '/',
                maxAge: 60 * 60 * 24 * 7,
            })
        },
    },
}
</script>
