<template>
  <modal-feed
  @close-modal="closeModal"
  :modalFeed='modalFeed'
  :open="show"
  @destroyFeed="destroyFeed"
   />
  <div v-for="feed in feedLists" :key="feed.id">
    <feed-list-node @onRemoveFeed="onRemoveFeed" @open-modal="openModal" :feed="feed" />
  </div>
</template>

<script>
import FeedListNode from "@/Shared/FeedList/FeedListNode";
import ModalFeed from "@/Shared/Overlay/ModalFeed";
import { Inertia } from "@inertiajs/inertia";
import filter from 'lodash/filter';

export default {
  components: {
    FeedListNode,
    ModalFeed,
  },

  props: {
    feeds: Array,
    selfFeed: Boolean,
    selfUser: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      showLoadButton: true,
      show: false,
      entity: {},
      feedLists: [],
      complaints: [],
      modalFeed: {},
    };
  },

  mounted() {
    this.feedLists = this.feeds;
  },

  methods: {
      onRemoveFeed(id){
          Inertia.delete(route('feed.destroy', id), { preserveScroll: true, preserveState: true })
          this.destroyFeed(id);
      },
    destroyFeed(id = null){
        const that = this;
        this.feedLists = filter(this.feedLists, function (x) {
            if(id){
                return x.id !== id;
            }
            return x.id !== that.modalFeed.id;
        });
    },

    openModal(feed) {
      this.show = true;
      this.modalFeed = feed;
    },
    closeModal() {
        this.show = false;
    }
  },
};
</script>
