<template>
  <v-navigation-drawer permanent rail theme="dark" class="elevation-2">
    <v-list density="compact">
      <v-list-item link :to="{name: 'HomeView' }" :active="false">
        <v-icon icon="mdi-grain" color="blue-lighten-5"></v-icon>
      </v-list-item>
    </v-list>
    <template v-slot:append>
      <v-list density="compact">
        <v-list-item to="/profile">
          <v-avatar color="blue-lighten-2" v-if="data">
            <v-img :src="gravatarUrl(data.email)"></v-img>
          </v-avatar>
        </v-list-item>
        <v-list-item prepend-icon="mdi-theme-light-dark" @click="toggleTheme" :active="false"></v-list-item>
      </v-list>
    </template>
  </v-navigation-drawer>
</template>

<script setup>
import { ref } from 'vue'
import { useQuery } from '@tanstack/vue-query'
import { getMe } from '@/client/client'
import gravatarUrl from 'gravatar-url'

import { useTheme } from 'vuetify'

const theme = useTheme()

function toggleTheme () {
  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
}
const { data, error, isFetching, isPending, isSuccess } = useQuery({
  queryKey: ['me'],
  queryFn: () => getMe(),
})
</script>