<template>
  <div class="">
    <div class="flex items-center 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="preview"
        />
      </div>
      <div class="flex flex-col">
        <span class="text-base md:text-xl font-semibold text-gray">{{ title }}</span>
      </div>
    </div>
    <div data-simplebar class="max-h-72 overflow-auto">
      <div class="divide-y divide-indigo-100" @click.stop="">
        <div
          v-for="media in medias"
          :key="media.id" :class="[currentSong?.id === media.id ?
                                     'bg-indigo-300 bg-opacity-25' :
                                     'hover:bg-indigo-300 hover:bg-opacity-25',
                                   'p-4 flex items-center space-x-4']"
          @click.prevent="startPlay(media)"
        >
          <div class="flex">
            <toggle-play-button :media_id="media.id" />
          </div>
          <div class="flex-1 text-sm text-gray-light">
            {{ media.name }}
          </div>
          <div class="text-sm text-gray-light">
            <div v-show="currentSong?.id === media.id">
              {{ seek }}
            </div>
            <div v-show="currentSong?.id !== media.id">
              {{ media.time }}
            </div>
          </div>
          <music-add-count v-if="$page.props.auth.user" :media_id="media.id"
                           :liked="media.liked" @addAudio="likeAudio"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapGetters } from 'vuex'
import find from 'lodash/find'
import { Inertia } from '@inertiajs/inertia'

import FeedPreview from '@/Shared/Feed/FeedPreview.vue'
import TogglePlayButton from '@/Shared/Misc/TogglePlayButton.vue'
import MusicAddCount from '@/Shared/Misc/MusicAddCount.vue'

export default {
    components: {
        FeedPreview,
        TogglePlayButton,
        MusicAddCount,
    },
    props: {
        medias: Array,
        feed_id: Number,
        title: String,
        preview: String,
    },
    emits: ['trackClick'],
    computed: {
        ...mapGetters(['playing']),
        ...mapState({
            playlist_id: (state) => state.player.playlist_id,
            seek: (state) => state.player.seek,
            currentSong: (state) => state.player.currentSong,
        }),
    },

    methods: {
        likeAudio(media_id) {
            Inertia.post(
                route('feed.audio.like', media_id),
                {},
                {
                    preserveScroll: true,
                    preserveState: true,
                }
            )
            let media = find(this.medias, (item) => item.id === media_id)
            if(media){
                media.liked = !media.liked
            }
        },
        ...mapActions(['toggleAudio', 'newCurrentPlaylist', 'skipToIndexByMusic']),
        startPlay(music) {
            this.$emit('trackClick')
            if (this.currentSong?.id === music.id) {
                this.toggleAudio()
                return
            }
            //   if (this.playlist_id === this.feed_id) {
            //     this.skipToIndexByMusic(music);
            //     return;
            //   }
            this.newCurrentPlaylist([music, this.medias, this.feed_id])

        },
    },

}
</script>
