<template>
  <div class="shadow-classic rounded-md bg-indigo-200 p-3 md:px-5 md:py-7">
    <feed-header :entity="entity" :feed_id="feed_id"
                 :created_at="entity.created_at_humans" :user="user"
                 @onRemoveFeed="onRemoveFeed"
    />
    <div class="mt-3 md:mt-6 feed-body" @click.stop="">
      <div class="mb-3 md:mb-6 text-gray text-sm md:text-base">
        <div @click.stop="">
          <div class="flex items-start border-b border-indigo-100">
            <div class="flex-shrink-0 mr-5 w-28 md:w-56">
              <feed-preview class="h-28 w-28 md:w-56 md:h-56 object-cover" type="music"
                            :source="entity.preview"
              />
            </div>
            <div class="flex flex-col">
              <div class="text-base md:text-xl font-semibold text-gray pb-1">
                {{ entity.title }}
              </div>
              <div v-if="entity.is_ads" class="prose-content"
                   v-html="entity.body"
              >
              </div>
              <template v-else>
                <feed-tags v-if="entity.tags.length" class="mb-1"
                           :tags="entity.tags"
                />
                <div class="pb-2">
                  {{ entity.body }}
                </div>
              </template>
            </div>
          </div>
        </div>
        <feed-paid-block
          :is_paid="entity.is_paid"
          :user_id="user.id"
          :price="entity.price"
          :feed_id="feed_id"
          :paid_open="entity.paid_open"
          @onReplaceFeed="onReplaceFeed"
        />
      </div>
      <div :class="[{
             'grid-cols-2': countMediaContent > 1
           }]" class="grid gap-1 md:gap-3 md:grid-cols-[repeat(auto-fit,minmax(280px,1fr))]"
           @click="addViewShow"
      >
        <div v-for="media in entity.collection_medias" :key="media.id"
             class="aspect-w-16 aspect-h-9"
        >
          <video :src="media.url" :poster="entity.preview"
                 controls
          ></video>
        </div>
      </div>
    </div>
    <feed-footer
      :likes="entity.likes"
      :liked="entity.liked"
      :comments="entity.comments"
      :count="entity.views_count"
      :ads="entity.is_ads"
      @likeFeed="likeFeed"
    />
  </div>
</template>

<script>
import FeedHeader from '@/Shared/FeedList/FeedHeader.vue'
import FeedFooter from '@/Shared/FeedList/FeedFooter.vue'
import FeedPaidBlock from '@/Shared/FeedList/FeedPaidBlock.vue'
import FeedPreview from '@/Shared/Feed/FeedPreview.vue'
import FeedTags from '@/Shared/Misc/FeedTags.vue'
import axios from 'axios'

export default {
    components: {
        FeedHeader,
        FeedFooter,
        FeedPaidBlock,
        FeedTags,
        FeedPreview,
    },
    props: {
        entity: Object,
        user: Object,
        feed_id: Number,
    },
    emits: ['likeFeed', 'onRemoveFeed'],
    computed: {
        countMediaContent()  {
            return this.entity.collection_medias.length
        }
    },
    methods: {
        addViewShow(){
            axios
                .post(route('add.view.feed', this.feed_id))
                .then(({ data }) => {
                    data && this.entity.views_count++
                })
        },
        onReplaceFeed(data) {
            this.entity.collection_medias = data.collection
            this.entity.preview = data.preview
            this.entity.paid_open = 1
        },
        onRemoveFeed() {
            this.$emit('onRemoveFeed', this.feed_id)
        },

        likeFeed() {
            this.$emit('likeFeed')
        },
    },
}
</script>
