<template>
    <div class="radio grid grid-cols-2 gap-x-8 p-8">
        <player
          class="col-span-1 py-4 bg-green-400"
          :currentSong="currentSong"
          @start-next-song="startNextSong"
          @start-prev-song="startPrevSong"
        ></player>

        <playlist
          class="col-span-1 py-4 px-6 bg-blue-400"
          :playlistSongs="playlistSongs"
          @start-song="startSong"
        ></playlist>
    </div>
</template>

<script>
import { defineComponent } from "vue"
import Player from "./Components/Player.vue"
import Playlist from "./Components/Playlist.vue"

export default defineComponent({
  emits: [],

  props: {},

  components: {
    Player,
    Playlist,
  },

  setup(props, {emit}) {
    let currentSong = {
      title: 'Childhood Memories',
      artist: 'mell-ø x Ambulo',
      album: 'Afloat Again EP',
      release_date: '2020',
      cover_art_url: 'https://music.ditoforge.test/images/mell-ø - Afloat Again EP (2020).webp',
      file_url: 'https://music.ditoforge.test/storage/music/mell-ø - Childhood Memories.mp3',
    }

    let playlistSongs = [currentSong, currentSong, currentSong]

    return { currentSong, playlistSongs }
  },

  beforeMount() {},

  mounted() {},

  data() {
    return {}
  },

  computed: {},

  methods: {
    startNextSong() {
console.log('App: starting the next song...')
    },

    startPrevSong() {
console.log('App: starting the previous song...')
    },

    startSong(song) {
console.log('App: starting an arbitrary song...')
console.log("App: here's the song:", song)
    },
  },
})
</script>

<style scoped>
.radio {
    min-width: 1024px;
    max-width: 1128px;
    width: 100%;
}
</style>
