<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 @click.stop="" class="col-span-1 flex mr-3 text-white">
            <div @click.prevent="startPlay(entity.collection_medias[0])" class="inline-block transition-colors hover:text-orange">
                <button :class="[ currentSong?.id === entity.collection_medias[0].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 !== entity.collection_medias[0].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 class="col-span-6 flex flex-col text-white" v-show="playlist_id === feed_id">
            <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 class="col-span-6 flex flex-col text-white" v-show="playlist_id !== feed_id">
            <span class="text-xs md:text-base text-gray font-semibold truncate">{{entity.collection_medias[0].name}}</span>
            <span class="text-xs md:text-sm text-gray-light truncate">{{entity.collection_medias[0].time}}</span>
        </div>

    </div>
</div>

    <feed-footer-misc
      :is_like="entity.liked"
      :likes="entity.likes"
      :comments="entity.comments"
      @like-feed="likeFeed"
    />

    <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";
import FeedHeaderMisc from "@/Shared/Feed/HeaderMisc";
import FeedPreview from "@/Shared/Feed/FeedPreview";
export default {
  components: { FeedFooterMisc, FeedHeaderMisc, FeedPreview },
  emits: ["likeFeed"],
  props: {
    entity: Object,
    user: Object,
    feed_id: Number,
  },

  computed: {
    ...mapGetters(["playing"]),
    ...mapState({
        seek: (state) => state.player.seek,
        playlist_id: (state) => state.player.playlist_id,
        currentSong: (state) => state.player.currentSong,
    }),
  },

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

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