<template>
  <q-chat-message
    :key="comment.id"
    :text="[comment.text]"
    :sent="sent"
    :bg-color="sent ? 'blue-1' : 'background'"
  >
    <template #avatar>
      <ui-user-avatar
        :user="manager"
        :class="{ 'q-mr-sm': !sent, 'q-ml-sm': sent }"
      />
    </template>
  </q-chat-message>
</template>

<style scoped lang="sass">
::v-deep
  .q-message-text:last-child
    min-height: auto
</style>

<script lang="ts">
import { Component, Inject, Prop, Vue } from 'vue-property-decorator'
import { TaskComment } from '@/widgets/tasks/types/TaskComment'
import { Manager } from '@/types/Manager'
import UiUserAvatar from '@/lib-components/UiUserAvatar.vue'
import { ManagerModule } from '@/widgets/tasks/modules/ManagerModule'
import { QChatMessage } from 'quasar'
@Component({
  components: { UiUserAvatar, QChatMessage },
})
export default class TaskComments extends Vue {
  @Inject('ManagerModule')
  managerModule!: ManagerModule

  @Prop({ type: Object, required: true })
  comment!: TaskComment

  @Prop(Boolean)
  sent!: boolean

  get manager(): Manager {
    return this.managerModule.getManagerByUid(this.comment.creatorUid)
  }
}
</script>
