<template>
  <div
    class="card-block contain group cursor-pointer relative overflow-hidden"
  >
    <feed-header-misc
      :count="entity.collection_medias.length"
      type="musics"
    />

    <div :class="[playlist_id === feed_id ? '' : 'transition-opacity ease-out opacity-0 group-hover:opacity-100' , ' absolute inset-0 z-10 flex items-center justify-center']">
      <div class="w-full grid grid-cols-7 items-center p-1 md:p-3 bg-indigo-300 bg-opacity-75">
        <div class="col-span-1 flex mr-3 text-white" @click.stop>
          <div class="inline-block transition-colors hover:text-orange" @click.prevent="startPlay(first_entity)">
            <button :class="[ currentSong?.id === first_entity.id ? '' : 'hidden', 'default' ]">
              <svg :class="[ playing ? 'hidden' : 'block', 'w-4 h-4 md:w-6 md:h-6' ]">
                <use xlink:href="#play"></use>
              </svg>
              <svg :class="[ playing ? 'block' : 'hidden', 'w-4 h-4 md:w-6 md:h-6' ]">
                <use xlink:href="#pause"></use>
              </svg>
            </button>
            <button :class="[ currentSong?.id !== first_entity.id ? '' : 'hidden', 'default' ]">
              <svg class="w-4 h-4 md:w-6 md:h-6">
                <use xlink:href="#play"></use>
              </svg>
            </button>
          </div>
        </div>

        <div v-show="playlist_id === feed_id" class="col-span-6 flex flex-col text-white">
          <span class="text-xs md:text-base text-gray font-semibold truncate">{{ currentSong.name }}</span>
          <span class="text-xs md:text-sm text-gray-light truncate">{{ seek }}</span>
        </div>
        <div v-show="playlist_id !== feed_id" class="col-span-6 flex flex-col text-white">
          <span class="text-xs md:text-base text-gray font-semibold truncate">{{ first_entity.name }}</span>
          <span class="text-xs md:text-sm text-gray-light truncate">{{ first_entity.time }}</span>
        </div>
      </div>
    </div>

    <feed-footer-misc
      v-if="entity.status == 1"
      :is_like="entity.liked"
      :likes="entity.likes"
      :comments="entity.comments"
      :count="entity.views_count"
      :ads="entity.is_ads"
      @like-feed="likeFeed"
    />
    <feed-footer-banned v-else />

    <div class="relative overflow-hidden">
      <feed-preview class="w-full h-36 md:h-72 object-cover" type="music"
                    :source="entity.preview"
      />
    </div>
  </div>
</template>


<script>
import { mapActions, mapState, mapGetters } from 'vuex'

import FeedFooterMisc from '@/Shared/Feed/FooterMisc.vue'
import FeedHeaderMisc from '@/Shared/Feed/HeaderMisc.vue'
import FeedPreview from '@/Shared/Feed/FeedPreview.vue'
import FeedFooterBanned from '@/Shared/Feed/FooterBanned.vue'
import axios from 'axios'
export default {
    components: { FeedFooterMisc, FeedHeaderMisc, FeedPreview, FeedFooterBanned },
    props: {
        entity: Object,
        user: Object,
        feed_id: Number,
    },
    emits: ['likeFeed'],
    computed: {
        first_entity() {
            const media = this.entity.collection_medias
            if (
                this.playlist_id === this.feed_id &&
        typeof media[this.indexPlaylist] !== 'undefined'
            ) {
                return media[this.indexPlaylist]
            }
            return media[0]
        },
        ...mapGetters(['playing']),
        ...mapState({
            seek: (state) => state.player.seek,
            indexPlaylist: (state) => state.player.index,
            playlist_id: (state) => state.player.playlist_id,
            currentSong: (state) => state.player.currentSong,
        }),
    },

    methods: {
        ...mapActions(['toggleAudio', 'newCurrentPlaylist']),
        startPlay(music) {
            this.addViewShow()
            if (this.currentSong?.id === music.id) {
                this.toggleAudio()
                return
            }
            this.newCurrentPlaylist([
                this.first_entity,
                this.entity.collection_medias,
                this.feed_id,
            ])

        },

        addViewShow() {
            axios
                .post(route('add.view.feed', this.feed_id))
                .then(({ data }) => {
                    data && this.entity.views_count++
                })
        },

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