<template>
  <div class="modal-media h-full">
    <div class="flex items-center border-b border-indigo-100">
      <div class="flex-shrink-0 mr-5">
        <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-96 overflow-auto">
      <div class="divide-y divide-indigo-100">
        <div
          @click.prevent="startPlay(media)"
          v-for="media in medias"
          :key="media.id"
          :class="[
            currentSong?.id === media.id
              ? 'bg-indigo-200 bg-opacity-25'
              : 'hover:bg-indigo-200 hover:bg-opacity-25',
            'p-4 flex items-center space-x-4',
          ]"
        >
          <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" @addAudio="likeAudio" :media_id='media.id' :liked='media.liked' />
        </div>
      </div>
    </div>
  </div>
</template>


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

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,
    title: String,
    preview: String,
    feed_id: Number,
  },

  methods: {
    ...mapActions(["toggleAudio", "newCurrentPlaylist", "skipToIndexByMusic"]),
    startPlay(music) {
      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]);
    },

    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;
      }
    },

  },

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