<template>

<div data-simplebar class="max-h-72 overflow-auto">
<div class="mt-2 divide-y divide-indigo-100">
    <div
    @click="toggleAudioLocal(listsMusic)"
        v-for="listsMusic in listsMusics"
        :key="listsMusic.id"
        :class="[
            currentSong?.id === listsMusic.id
              ? 'bg-indigo-300 bg-opacity-25'
              : 'hover:bg-indigo-300 hover:bg-opacity-25',
            'p-4 flex items-center space-x-4',
          ]"
    >
        <div class="flex">
            <toggle-play-button :media_id="listsMusic.id" />
        </div>
        <div class="flex flex-1 text-sm text-gray-light">
            {{ listsMusic.name }}
        </div>
        <div class="text-sm text-gray-light">
            <span v-show="!listsMusic.playing">{{listsMusic.time}}</span>
            <span v-show="listsMusic.playing">{{seek}}</span>
        </div>
    </div>
</div>
</div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import TogglePlayButton from "@/Shared/Misc/TogglePlayButton";
export default {

  components: {
      TogglePlayButton
  },

  data() {
    return {

    };
  },
  created(){
      //console.log('loaded - now');
  },

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

  methods: {
  ...mapActions([
      "toggleAudio",
      "skipToIndexByMusic",
    ]),
    toggleAudioLocal(music){
      if (this.currentSong?.id === music.id) {
            this.toggleAudio();
            return;
      }
      this.skipToIndexByMusic(music);
    },
  },
};
</script>
