<template>
  <div v-on="$listeners" v-bind="$attrs">
    <div
      v-if="selectedUids.length > 0"
      class="manager-avatars"
      :class="{ 'manager-avatars_dense': selectedManagers.length > 1 }"
    >
      <ui-user-avatar
        v-for="manager in visibleManagers"
        :key="manager.id"
        :user="manager"
      />
      <q-avatar
        v-if="selectedManagers.length > maxVisibleCount - 1"
        size="md"
        font-size="14px"
        color="blue-grey"
        text-color="white"
      >
        +{{ selectedManagers.length - maxVisibleCount + 1 }}
      </q-avatar>
    </div>
    <ui-btn v-else outline rounded :label="btnLabel" />
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { Manager } from '@/types/Manager'
import UiBtn from '@/lib-components/buttons/UiBtn.vue'
import UiUserAvatar from '@/lib-components/UiUserAvatar.vue'
import { QAvatar } from 'quasar'

@Component({
  inheritAttrs: false,
  components: { UiUserAvatar, UiBtn, QAvatar },
})
export default class ManagerAvatars extends Vue {
  @Prop({ type: String, required: true })
  btnLabel!: string[]

  @Prop({ type: Array, default: () => [] })
  selectedUids!: string[]

  @Prop({ type: Array, required: true })
  managers!: Manager[]

  maxVisibleCount = 4

  get selectedManagers(): Manager[] {
    return this.managers.filter(manager =>
      this.selectedUids.includes(manager.id)
    )
  }

  get visibleManagers(): Manager[] {
    return this.selectedManagers.slice(
      0,
      this.selectedManagers.length > this.maxVisibleCount - 1
        ? 3
        : this.maxVisibleCount
    )
  }
}
</script>

<style scoped lang="sass">
.manager-avatars
  display: flex
  cursor: pointer

  &:hover
    filter: drop-shadow(1px 0px 5px $primary)

  *:not(:last-of-type)
    margin-right: 4px

  &_dense > *
    margin-left: -6px
    box-shadow: 0 0 0 4px #fff
</style>
