<script setup lang="ts">
import { userStore } from '@stores/user.store'

const useUserStore = userStore()
const router = useRouter()

const logoutAndRedirect = () => {
  useUserStore.logout()
  router.push('/login')
}

const avatarColor = computed(() => {
  switch (useUserStore.role) {
  // eslint-disable-next-line @stylistic/ts/indent
  case 'Admin': return 'error'
    // eslint-disable-next-line @stylistic/ts/indent
  case 'Support': return 'secondary'
    // eslint-disable-next-line @stylistic/ts/indent
  default: return 'info'
  }
})
</script>

<template>
  <VBadge
    dot
    location="bottom right"
    offset-x="3"
    offset-y="3"
    bordered
    color="success"
  >
    <VAvatar
      class="cursor-pointer"
      :color="avatarColor"
      variant="tonal"
    >
      <template v-if="useUserStore.role === 'Admin'">
        AD
      </template>
      <template v-else-if="useUserStore.role === 'Support'">
        SU
      </template>
      <template v-else>
        IN
      </template>

      <!-- SECTION Menu -->
      <VMenu
        activator="parent"
        width="230"
        location="bottom end"
        offset="14px"
      >
        <VList>
          <!-- 👉 User Avatar & Name -->
          <VListItem>
            <template #prepend>
              <VListItemAction start>
                <VBadge
                  dot
                  location="bottom right"
                  offset-x="3"
                  offset-y="3"
                  color="success"
                >
                  <VAvatar
                    :color="avatarColor"
                    variant="tonal"
                  >
                    <template v-if="useUserStore.role === 'Admin'">
                      AD
                    </template>
                    <template v-else-if="useUserStore.role === 'Support'">
                      SU
                    </template>
                    <template v-else>
                      IN
                    </template>
                  </VAvatar>
                </VBadge>
              </VListItemAction>
            </template>

            <VListItemTitle class="font-weight-semibold">
              {{ useUserStore.username }}
            </VListItemTitle>
            <VListItemSubtitle>{{ useUserStore.role }}</VListItemSubtitle>
          </VListItem>

          <VDivider class="my-2" />

          <!-- 👉 Logout -->
          <VListItem @click="logoutAndRedirect">
            <template #prepend>
              <VIcon
                class="me-2"
                icon="tabler-logout"
                size="22"
              />
            </template>

            <VListItemTitle>Logout</VListItemTitle>
          </VListItem>
        </VList>
      </VMenu>
      <!-- !SECTION -->
    </VAvatar>
  </VBadge>
</template>
