<template>
  <div class="flex items-center no-wrap overflow-hidden w100">
    <q-icon v-if="customer?.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="customer?.email" class="ellipsis">
      {{ customer.email }}
    </span>
    <span v-else class="ellipsis">
      {{ nameTgUser(tgUser) }}
    </span>
  </div>
</template>

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

  const authStore = useAuthStore()
  const customer = authStore.customer
  const tg = inject('tg') as WebApp
  const tgUser = tg.initDataUnsafe.user as WebAppUser | undefined
</script>

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