<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 class="fix-loader" v-if="tgUser?.photo_url && !imgError" :src="tgUser.photo_url" @error="imgError = true"/>
      <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 { ref, 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
  const imgError = ref(false)
</script>

<style scoped lang="scss">
  .fix-loader :deep(.q-spinner-mat) {
    height: 100% !important;
  }
</style>
