<template>
  <div v-observe-visibility="visiblityConfig">
    <task-card
      v-for="(task, index) in tasks"
      :key="index"
      :task="task"
    ></task-card>
  </div>
</template>
<script>
import WorklistService from '../../../service/worklistService';

import TaskCard from './TaskCard.vue';
import * as _ from 'lodash';
export default {
  components: {
    TaskCard,
  },
  data() {
    return {
      tasks: this.bucket,
    };
  },
  computed: {
    taskIdswhichhaveIsViewedFalse() {
      return _.map(
        _.filter(this.tasks, ({ is_viewed }) => is_viewed === false),
        ({ task_ID }) => task_ID,
      );
    },
    haveIsViewedFalse() {
      return _.filter(this.tasks, ({ is_viewed }) => is_viewed === false)
        .length;
    },
    visiblityConfig() {
      return {
        callback: this.visibilityChanged,
        once: true,
        intersection: {
          threshold: 0.7,
        },
      };
    },
  },
  props: {
    bucket: {
      type: Array,
      required: true,
    },
  },
  methods: {
    visibilityChanged(isVisible, entry) {
      if (this.haveIsViewedFalse && isVisible) {
        setTimeout(this.updateIsViewedFlag, 1000);
      }
    },

    updateIsViewedFlag() {
      WorklistService.updateViewStatusTask(this.taskIdswhichhaveIsViewedFalse)
        .then(({ data: { success } }) => {
          if (success) {
            this.tasks = _.map(this.tasks, (b) => ({
              ...b,
              is_viewed: true,
            }));
          } else {
          }
        })
        .catch((e) => {
          console.log('error', e);
        });
    },
  },
};
</script>