<template>
  <div v-show="buckets.length">
    <h4 class="card-title notification-title bg-light">
      {{ notificationHeadLabel }}
    </h4>
    <notification-bucket
      v-for="(bucket, index) in buckets"
      :key="index"
      :bucket="bucket"
      @close_bucket="deleteBucket(index)"
    ></notification-bucket>
  </div>
</template>
<script>
import { chunkArrayInGroups } from '../../utils/util';
import NotificationBucket from './NotificationBucket.vue';
import * as _ from 'lodash';
export default {
  components: {
    NotificationBucket,
  },
  props: {
    notification: {
      type: Object,
      required: true,
    },
    bucketLimit: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      notifications: this.notification.notifications,
      buckets: chunkArrayInGroups(
        [...this.notification.notifications],
        this.bucketLimit,
      ),
    };
  },
  methods: {
    deleteBucket(index) {
      this.buckets = _.filter(this.buckets, (b, i) => i !== index);
      // if (!this.buckets.length) {
      //   this.$emit('close_notification_day');
      // }
    },
  },
  computed: {
    notificationHeadLabel() {
      if (this.notifications[0]['istoday'] === true) return 'Today';
      if (this.notifications[0]['isyesterday'] === true) return 'Yesterday';
      return this.notifications[0]['dateFormattedString'];
    },
  },
  watch: {
    notification(v, oldv) {
      if (!_.isEqual(v.notifications, oldv.notifications)) {
        this.notifications = [...v.notifications];
        this.buckets = chunkArrayInGroups(
          [...this.notifications],
          this.bucketLimit,
        );
      }
    },
  },
};
</script>