<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">
      <div class="mb-3 md:mb-6 text-gray text-sm md:text-base">
        <div @click.stop="">
          <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"
            />
            {{ entity.body }}
          </template>
        </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))]"
      >
        <div v-for="media in entity.collection_medias" :key="media.id">
          <img class="w-full h-full object-cover" :src="media.url"
               alt=""
          />
        </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 FeedTags from '@/Shared/Misc/FeedTags.vue'

export default {
    components: {
        FeedHeader,
        FeedFooter,
        FeedPaidBlock,
        FeedTags,
    },
    props: {
        entity: Object,
        user: Object,
        feed_id: Number,
    },
    emits: ['likeFeed', 'onRemoveFeed'],
    computed: {
        countMediaContent()  {
            return this.entity.collection_medias.length
        }
    },

    methods: {
        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>
