<template>
    <div>
        <v-navigation-drawer v-model="drawer" clipped fixed app color="primary">
            <client-only>
                <v-list-item v-if="loggedIn">
                    <v-list-item-avatar>
                        <v-icon>{{ mdiAccount }}</v-icon>
                    </v-list-item-avatar>

                    <v-list-item-content>
                        <v-list-item-title>
                            {{ $auth.$state.user.username }}
                        </v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
                <v-divider />
                <v-list>
                    <v-list-item
                        v-for="(item, i) in items"
                        :key="i"
                        :to="item.to"
                        router
                        nuxt
                        exact
                    >
                        <v-list-item-action>
                            <v-icon>{{ item.icon }}</v-icon>
                        </v-list-item-action>
                        <v-list-item-content>
                            <v-list-item-title v-text="item.title" />
                        </v-list-item-content>
                    </v-list-item>
                </v-list>
            </client-only>
            <template v-slot:append>
                <client-only>
                    <div class="pa-2">
                        <v-btn
                            v-if="loggedIn"
                            block
                            color="secondary"
                            @click.stop="logout"
                        >
                            Logout
                        </v-btn>
                        <v-btn v-else block color="secondary" to="/account">
                            Login
                        </v-btn>
                    </div>
                </client-only>
            </template>
        </v-navigation-drawer>

        <v-app-bar clipped-left fixed app color="primary">
            <v-app-bar-nav-icon @click.stop="drawer = !drawer">
                <v-icon>{{ mdiMenu }}</v-icon>
            </v-app-bar-nav-icon>
            <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-app-bar>
    </div>
</template>

<script>
import {
    mdiMenu,
    mdiBrightness5,
    mdiBrightness2,
    mdiPencil,
    mdiHome,
    mdiAccount,
} from '@mdi/js'
import { mapState } from 'vuex'

export default {
    name: 'Navbar',
    data: () => ({
        mdiMenu,
        mdiBrightness5,
        mdiBrightness2,
        mdiAccount,
        drawer: false,
        items: [
            {
                icon: mdiHome,
                title: 'Welcome',
                to: '/',
            },
            {
                icon: mdiPencil,
                title: 'Notes',
                to: '/notes',
            },
        ],
    }),
    computed: {
        ...mapState('auth', ['loggedIn']),
    },
    methods: {
        async logout() {
            this.$store.commit('notes/clear')
            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>
