<template>
    <aside>
        <header>
            <h3 class="text-gray-600 font-medium">Previous song</h3>
            <playlist-card class="mt-4" :song="previousSong"></playlist-card>
        </header>

        <div class="playlist">
            <h3 class="text-gray-600 font-medium">Up next</h3>
            <div class="playlist-list_container mt-4">
                <playlist-card v-for="song in nextSongs" :key="song.id" :song="song" @click="startSong(song)"></playlist-card>
            </div>
        </div>
    </aside>
</template>

<script>
import { defineComponent } from "vue"
import PlaylistCard from "./PlaylistCard.vue"

export default defineComponent({
  emits: [
    'startSong'
  ],

  props: {
    playlistSongs: Array,
  },

  components: {
    PlaylistCard,
  },

  setup(props, {emit}) {
    let previousSong = {}

    return { previousSong }
  },

  beforeMount() {},

  mounted() {},

  data() {
    return {}
  },

  computed: {
    nextSongs() {
      return this.playlistSongs.slice(0, 4)
    },
  },

  methods: {
    startSong(song) {
console.log('Playlist: starting an arbitrary song...')
      this.$emit('startSong', song)
    },
  },
})
</script>

<style scoped>
.playlist-list_container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, min-content);
    gap: 2em 0em;
}
</style>
