<template>
  <q-avatar
    v-bind="$attrs"
    v-on="$listeners"
    :size="size"
    :color="color"
    text-color="white"
  >
    <img v-if="user.avatar" :src="uniqueImage" :alt="fullName" />
    <span v-else class="ui-user-avatar__initials">{{ userInitials }}</span>
    <slot></slot>
  </q-avatar>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import User from '../types/User'
import UserService from '../services/UserService'
import { QAvatar } from 'quasar'

@Component({ inheritAttrs: false, components: { QAvatar } })
export default class UiUserAvatar extends Vue {
  @Prop(Boolean)
  isUniqueImage?: boolean

  @Prop({ type: Object, required: true })
  user!: User

  @Prop({ type: String, default: 'md' })
  size!: string

  get uniqueImage(): string {
    return (
      this.user.avatar + (this.isUniqueImage ? '?' + new Date().getTime() : '')
    )
  }

  get fullName(): string {
    return UserService.getUserFullName(this.user)
  }

  get userInitials(): string {
    return UserService.getUserInitials(this.user)
  }

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