<template>
  <component
    :is="currentTypeNode"
    :class="{'need-approved': feed.entity?.status == 0}"
    :feed_id="feed.id"
    :user="feed.user"
    :entity="feed.entity"
    @click.prevent="openModal(feed)"
    @like-feed="likeFeed"
  ></component>
  <p v-if="feed.entity?.price" class="mt-2 text-gray-light text-sm">
    Цена: {{ feed.entity.price }}
  </p>
  <p v-if="feed.entity?.purchase_date" class="mt-2 text-gray-light text-sm">
    Дата покупки: {{ feed.entity.purchase_date }}
  </p>
</template>

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

export default {
    components: {
        FeedImages,
        FeedVideos,
        FeedMusics,
        FeedAdults,
        FeedProhibited,
    },
    props: {
        feed: Object,
    },
    emits: ['openModal'],
    computed: {
        authUser() {
            return usePage().props.value.auth.user
        },
        currentTypeNode() {
            return 'feed-' + this.feed.type.toLowerCase()
        },
    },
    methods: {
        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>

<style>
.need-approved{
    outline: 5px solid #FF9800;
}
</style>
