<template>
  <div class="tabs">
    <b-button-group class="d-flex w-100">
      <b-button
        variant="primary"
        v-for="(item, index) in items"
        :key="index"
        @click="$emit('changetab', item.label)"
        :class="`button-tab ${activeTab === item.label ? 'active' : ''}`"
      >
        <span>{{ item.label }}</span>
        <span
          class="badge bg-success ms-1 rounded-pill"
          v-if="item.value > 0"
          >{{ item.value }}</span
        >
      </b-button>
    </b-button-group>
  </div>
</template>
<script>
import * as _ from 'lodash';
import { BButtonGroup,BButton} from 'bootstrap-vue-next'

export default {
  mounted() {
    if (this.inboxTypeCount) {
      this.items = _.map(this.items, (i) => ({
        ...i,
        value: this.inboxTypeCount[i.label],
      }));
    }
  },
  props: {
    inboxTypeCount: {},
    activeTab: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      items: [
        {
          label: 'My Inbox',
          value: 0,
        },
        {
          label: 'Team Inbox',
          value: 0,
        },
        {
          label: 'Unassigned',
          value: 0,
        },
        {
          label: 'All',
          value: 0,
        },
      ],
    };
  },
  watch: {
    inboxTypeCount: {
      // deep: true,
      handler(v) {
        if (v) {
          this.items = _.map(this.items, (i) => ({
            ...i,
            value: v[i.label],
          }));
        }
      },
    },
  },
  components: {
    BButtonGroup,BButton
  },
};
</script>