<template>
  <div class="managers-groups">
    <managers-list
      @subscribe-managers="subscribeManagers"
      @unsubscribe-managers="unsubscribeManagers"
      v-for="(managers, groupName) in managersByGroup"
      :key="groupName"
      :managers="managers"
      :title="groupName"
      :manager-uids="managerUids"
      :label-empty="labelEmpty"
    />
  </div>
</template>

<style scoped lang="sass">
.managers-groups
  columns: 2
</style>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import { Manager, ManagerCollectionsByGroup } from '@/types/Manager'
import ManagersList from '@/widgets/base/components/managers-select/ManagersList.vue'

@Component({
  components: { ManagersList },
})
export default class ManagersGroups extends Vue {
  @Prop({ type: Object, required: true })
  managersByGroup!: ManagerCollectionsByGroup

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

  @Prop(String)
  labelEmpty!: string

  @Emit()
  unsubscribeManagers(managers: Manager[]) {
    return managers
  }

  @Emit()
  subscribeManagers(managers: Manager[]) {
    return managers
  }
}
</script>
