<template>
  <div class="q-mb-lg managers-list">
    <div v-if="!!title" class="flex no-wrap items-center q-pl-md">
      <div class="text-h5 q-mr-sm">{{ title }}</div>
      <ui-btn-icon
        v-if="unsubscribedManagers.length"
        @click="subscribeManagers(unsubscribedManagers)"
        color="blue-grey"
        icon="la la-user-friends"
      />
    </div>
    <q-list v-if="unsubscribedManagers.length">
      <managers-list-item
        v-for="manager in unsubscribedManagers"
        @click="subscribeManagers([manager])"
        :key="manager.id"
        :manager="manager"
      />
    </q-list>
    <div v-else class="q-pl-md">
      <div class="text-blue-grey q-my-md">{{ labelEmpty }}</div>
      <ui-btn
        @click="unsubscribeGroup"
        outline
        label="Отписать"
        color="primary"
      />
    </div>
  </div>
</template>

<style scoped lang="sass">
.managers-list
  break-inside: avoid
  overflow: auto
</style>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import { Manager, ManagerCollection } from '@/types/Manager'
import { QList } from 'quasar'
import UiBtnIcon from '@/lib-components/buttons/UiBtnIcon.vue'
import UiList from '@/lib-components/UiList.vue'
import UiBtn from '@/lib-components/buttons/UiBtn.vue'
import ManagersListItem from '@/widgets/base/components/managers-select/ManagersListItem.vue'

@Component({
  components: { UiBtn, UiList, UiBtnIcon, ManagersListItem, QList },
})
export default class ManagersList extends Vue {
  @Prop(String)
  title!: string

  @Prop({ type: Object, required: true })
  managers!: ManagerCollection

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

  @Prop(String)
  labelEmpty!: string

  get unsubscribedManagers(): Manager[] {
    return Object.values(this.managers).filter(
      manager => manager.enabled && !this.managerUids.includes(manager.id)
    )
  }

  unsubscribeGroup() {
    return this.unsubscribeManagers(Object.values(this.managers))
  }

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

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