<script lang="ts" setup>
import { useRouter } from 'vue-router'
import avatar from '@/assets/avatars/avatar-6.png'
import type { AuthUser } from '@/plugins/apis/types'

const user = ref<AuthUser>()
const router = useRouter()

onMounted(() => user.value = localStorage.getItem('userData') ? JSON.parse(localStorage.getItem('userData') as any) : {})

const logOut = () => {
  localStorage.removeItem('userData')
  router.replace({ name: 'login' })
}

const quickLinks = [
  {
    title: 'Pricing',
    to: '/pages/pricing',
    icon: 'mdi-currency-usd',
  },
  {
    title: 'FAQs',
    to: '/pages/faq',
    icon: 'mdi-help-circle-outline',
  },
  {
    title: 'Users',
    to: '/users/list',
    icon: 'mdi-account-group-outline',
  },
]
</script>

<template>
  <VAvatar class="cursor-pointer">
    <VImg :src="avatar" />

    <VMenu
      activator="parent"
      offset="14px"
    >
      <VList>
        <VListItem
          v-if="user"
          :append-avatar="avatar"
        >
          <VListItemTitle>{{ user.fullName }}</VListItemTitle>
          <VListItemSubtitle>{{ user.email }}</VListItemSubtitle>
        </VListItem>
        <VDivider class="mt-2" />
        <VListItem
          v-for="item in quickLinks"
          :key="item.title"
          :to="item.to"
        >
          <template #append>
            <VIcon
              size="22"
              :icon="item.icon"
            />
          </template>
          <VListItemTitle>{{ item.title }}</VListItemTitle>
        </VListItem>
        <VDivider />
        <VListItem @click="logOut">
          <template #append>
            <VIcon
              size="22"
              icon="mdi-logout"
            />
          </template>
          <VListItemTitle>Logout</VListItemTitle>
        </VListItem>
      </VList>
    </VMenu>
  </VAvatar>
</template>
