<template>
  <manager-avatars
    v-on="$listeners"
    v-bind="$attrs"
    btn-label="Участники..."
    :managers="managers"
    :selected-uids="selectedUids"
    :class="{ opened_thread: !thread.processedAt }"
  />
</template>

<style scoped lang="sass">
::v-deep
  .manager-avatars_dense > *
    box-shadow: 0 0 0 4px $blue-grey-1 !important

.opened_thread
  ::v-deep .manager-avatars_dense > *
    box-shadow: 0 0 0 4px $blue-grey-2 !important
</style>

<script lang="ts">
import { Component, Inject, Prop, Vue } from 'vue-property-decorator'
import ManagerAvatars from '@/widgets/base/components/manager-avatars/ManagerAvatars.vue'
import { ManagerModule } from '@/widgets/messages/modules/ManagerModule'
import { Manager } from '@/types/Manager'
import { MessageThread } from '@/widgets/messages/types/MessageThread'

@Component({
  inheritAttrs: false,
  components: { ManagerAvatars },
})
export default class ThreadManagerAvatars extends Vue {
  @Inject('ManagerModule')
  managerModule!: ManagerModule

  @Prop({ type: Array, required: true })
  selectedUids!: string[]

  @Prop({ type: Object, required: true })
  thread!: MessageThread

  get managers(): Manager[] {
    return this.managerModule.managersAsArray
  }
}
</script>
