<template>
  <managers-select
    v-on="$listeners"
    v-bind="$attrs"
    @input="setUids"
    :uids="uids"
    :managers="managersAsArray"
    :current-manager="currentManager"
    :managers-by-group="managersByGroup"
    :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 ManagerAvatars from '@/widgets/base/components/manager-avatars/ManagerAvatars.vue'
import ManagersSelect from '@/widgets/base/components/managers-select/ManagersSelect.vue'
import { ManagerModule } from '@/widgets/tasks/modules/ManagerModule'
import { Manager } from '@/types/Manager'
import { TaskUserModule } from '@/widgets/tasks/modules/TaskUserModule'

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

  @Inject('TaskUserModule')
  userModule!: TaskUserModule

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

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

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

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

  get isShowAddMeBtn() {
    return this.uids.length !== 1 || !this.uids.includes(this.currentManager.id)
  }

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