<template>
  <div v-observe-visibility="visiblityConfig">
    <notification-tile
      v-for="(notification, index) in notifications"
      :key="index"
      :type="notification.type"
      :message="notification.message"
      :createdAt="notification.timeFormattedString"
      :notificationId="notification.notificationId"
      :is_viewed="notification.is_viewed"
      @tile_close="onTileClose"
    ></notification-tile>
  </div>
</template>
<script>
import NotificationService from '../../service/notificationService';

import NotificationTile from './NotificationTile.vue';
import * as _ from 'lodash';
export default {
  components: {
    NotificationTile,
  },
  data() {
    return {
      notifications: this.bucket,
    };
  },
  computed: {
    notificationIdswhichhaveIsViewedFalse() {
      return _.map(
        _.filter(this.notifications, ({ is_viewed }) => is_viewed === false),
        ({ notificationId }) => notificationId,
      );
    },
    haveIsViewedFalse() {
      return _.filter(
        this.notifications,
        ({ 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);
      }
    },
    onTileClose(notificationId) {
      this.notifications = _.filter(
        this.notifications,
        (b) => b.notificationId !== notificationId,
      );
      if (!this.notifications.length) {
        this.$emit('close_bucket');
      }
      NotificationService.updateIsReadFlag([notificationId])
        .then(({ data: { success, message } }) => {
          if (success) {
          } else {
            console.log('error', message);
          }
        })
        .catch((e) => {
          console.log('error', e);
        });
    },
    updateIsViewedFlag() {
      NotificationService.updateIsViewedFlag(
        this.notificationIdswhichhaveIsViewedFalse,
      )
        .then(({ data: { success } }) => {
          if (success) {
            this.notifications = _.map(this.notifications, (b) => ({
              ...b,
              is_viewed: true,
            }));
          } else {
          }
        })
        .catch((e) => {
          console.log('error', e);
        });
    },
  },
};
</script>