<template>
  <div class="flex items-center no-wrap overflow-hidden w100">
    <q-icon v-if="user?.email" size="md" class="q-mr-sm" name="mdi-account-circle-outline"/>
    <q-avatar v-else size="32px" class="q-mr-sm">
      <q-img v-if="tgUser?.photo_url" :src="tgUser.photo_url"/>
      <q-icon v-else size="md" class="q-mr-sm" name="mdi-account-circle-outline"/>
    </q-avatar>
    <span v-if="user?.email" class="ellipsis">
      {{ user.email }}
    </span>
    <span v-else class="ellipsis">
      {{
        tgUser?.first_name + 
        (tgUser?.first_name && tgUser?.last_name ? ' ' : '') +
        tgUser?.last_name +
        !(tgUser?.first_name || tgUser?.last_name) ? tgUser?.username : ''
      }}
    </span>
  </div>
</template>

<script setup lang="ts">
  import { inject } from 'vue'
  import { useAuthStore } from 'stores/auth'
  import type { WebApp } from '@twa-dev/types'

  const authStore = useAuthStore()
  const user = authStore.user
  const tg = inject('tg') as WebApp
  const tgUser = tg.initDataUnsafe.user

</script>

<style lang="scss">
</style>
