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

<script>
import { Inertia } from '@inertiajs/inertia'
import { usePage } from '@inertiajs/inertia-vue3'
import axios from 'axios'
import FeedImages from '@/Shared/FeedList/Images.vue'
import FeedVideos from '@/Shared/FeedList/Videos.vue'
import FeedMusics from '@/Shared/FeedList/Musics.vue'
import FeedAdults from '@/Shared/FeedList/Adults.vue'
import FeedProhibited from '@/Shared/FeedList/Prohibited.vue'


export default {
    components: {
        FeedImages,
        FeedVideos,
        FeedMusics,
        FeedAdults,
        FeedProhibited,
    },
    props: {
        feed: Object,
    },
    emits: ['openModal', 'onRemoveFeed'],
    computed: {
        authUser() {
            return usePage().props.value.auth.user
        },
        currentTypeNode() {
            return 'feed-' + this.feed.type.toLowerCase()
        },
    },
    methods: {
        onRemoveFeed(id) {
            this.$emit('onRemoveFeed', id)
        },
        openModal(feed) {
            if(feed.entity){
                this.$emit('openModal', feed)
            }
        },

        likeFeed() {
            axios
                .post(route('feed.like', this.feed.id))
                .then(() => {
                    if (this.feed.entity.liked) {
                        this.feed.entity.liked = false
                        this.feed.entity.likes--
                    } else {
                        this.feed.entity.liked = true
                        this.feed.entity.likes++
                    }
                })


            // 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>
