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