<template>
  <managers-select
    v-on="$listeners"
    v-bind="$attrs"
    @input="setSubscribedManagers"
    @select-current-manager="subscribeMe"
    :uids="uids"
    :managers="managers"
    :managers-by-group="managersByGroup"
    :current-manager="currentManager"
    :is-show-add-me-btn="isShowAddMeBtn"
    label-add-me="Подписаться"
    label-empty-group="На сообщения подписан весь отдел"
  />
</template>

<script lang="ts">
import { Component, Emit, Inject, Prop, Vue } from 'vue-property-decorator'
import { ManagerModule } from '@/widgets/messages/modules/ManagerModule'
import { MessageUserModule } from '@/widgets/messages/modules/MessageUserModule'
import { Manager } from '@/types/Manager'
import ManagersSelect from '@/widgets/base/components/managers-select/ManagersSelect.vue'

@Component({
  inheritAttrs: false,
  components: { ManagersSelect },
})
export default class ThreadManagersSelect extends Vue {
  @Inject('MessageUserModule')
  userModule!: MessageUserModule

  @Inject('ManagerModule')
  managerModule!: ManagerModule

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

  get managers() {
    return this.managerModule.managersAsArray
  }

  get managersByGroup() {
    return this.managerModule.managersByGroup
  }

  get currentManager(): Manager {
    return this.userModule.user as Manager
  }

  get isShowAddMeBtn(): boolean {
    return !this.uids.includes(this.currentManager.id)
  }

  @Emit()
  subscribeMe() {
    return this.currentManager.id
  }

  @Emit()
  setSubscribedManagers(uids: string[]) {
    return uids
  }
}
</script>
