<template>
  <q-avatar :color="color" text-color="white">
    <img v-if="!!client.avatar" :src="client.avatar" :alt="client.fullName" />
    <span
      v-else
      class="client-avatar-initials"
      :class="{ 'client-avatar-initials_empty': !client.fullName }"
    >
      {{ initials }}
    </span>
  </q-avatar>
</template>

<style scoped lang="sass">
.client-avatar-initials
  font-size: 14px
  font-weight: normal
  text-transform: uppercase

  &_empty
    font-size: 20px
    margin-left: 2px
    margin-top: 2px
</style>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import SearchedClient from '@/widgets/base/types/SearchedClient'
import { QAvatar } from 'quasar'

@Component({ components: { QAvatar } })
export default class ClientSelectAvatar extends Vue {
  @Prop({ type: Object, required: true })
  client!: SearchedClient

  get initials(): string {
    if (this.client.fullName) {
      return this.client.fullName
        .split(' ')
        .slice(0, 2)
        .map(part => part[0])
        .join('')
    }

    return '🙂'
  }

  get color(): string | undefined {
    return this.client.avatar ? undefined : 'primary'
  }
}
</script>
