<template>
  <component
    @click.prevent="openModal(feed)"
    @onRemoveFeed='onRemoveFeed'
    @like-feed="likeFeed"
    :is="currentTypeNode"
    :feed_id="feed.id"
    :user="feed.user"
    :entity="feed.entity"
  ></component>
</template>

<script>
import { Inertia } from "@inertiajs/inertia";
import FeedImages from "@/Shared/FeedList/Images";
import FeedVideos from "@/Shared/FeedList/Videos";
import FeedMusics from "@/Shared/FeedList/Musics";
import { usePage } from "@inertiajs/inertia-vue3";

export default {
  components: {
    FeedImages,
    FeedVideos,
    FeedMusics,
  },
  props: {
    feed: Object,
  },
  emits: ["openModal", "onRemoveFeed"],
  computed: {
    authUser() {
      return usePage().props.value.auth.user;
    },
    currentTypeNode() {
        if (this.feed.entity.is_paid && this.authUser.id !== this.feed.user.id) {
          //return "feed-paid-" + this.feed.type.toLowerCase();
        }
      return "feed-" + this.feed.type.toLowerCase();
    },
  },
  methods: {
    onRemoveFeed(id) {
      this.$emit("onRemoveFeed", id);
    },
    openModal(feed) {
      this.$emit("openModal", feed);
    },

    likeFeed() {
      Inertia.post(
        route("feed.like", this.feed.id),
        {},
        {
          preserveScroll: true,
          preserveState: true,
        }
      );
      if (this.feed.entity.liked) {
        this.feed.entity.liked = false;
        this.feed.entity.likes--;
      } else {
        this.feed.entity.liked = true;
        this.feed.entity.likes++;
      }
    },
  },
};
</script>
