<template>
  <div class="modal-media h-full border-r border-indigo-100">
    <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-72 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-if="currentSong?.id === media.id">{{ seek }}</div>
            <span v-else>{{ media.time }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { mapActions, mapState, mapGetters } from "vuex";
import FeedPreview from "@/Shared/Feed/FeedPreview";
import TogglePlayButton from "@/Shared/Misc/TogglePlayButton";
export default {
  components: {
    FeedPreview,
    TogglePlayButton,
  },
  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]);
    },
  },

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