<template>
  <b-container>
    <b-row>
      <b-col>
        <h1>Item</h1>
      </b-col>
    </b-row>
    <big-chungus-loader text="Fetching item info..." v-if="processing"/>
    <b-row v-else>
      <b-col class="my-4">
        <div>
          <b-img-lazy blank-src="@/assets/music_placeholder.png"
                      :src="songInfo.cover_url || '@/assets/music_placeholder.png'"
                      id="cover-art"
          />
        </div>
        <div class="my-3">
          <p><b>Artist:</b> {{ songInfo.artist }} </p>
          <p><b>Album:</b> {{ songInfo.album }}</p>
          <p><b>Title:</b> {{ songInfo.title }}</p>
        </div>
        <div class="my-3">
          <b-button variant="success" :disabled="!songInfo.spotify_id">Play!</b-button>
        </div>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
import BigChungusLoader from "@/components/BigChungusLoader";

export default {
  name: "Item",
  components: {
    BigChungusLoader
  },
  data() {
    return {
      processing: true,
      songInfo: {}
    }
  },
  mounted() {
    this.$api.getItem(this.$route.params.id).then((data) => {
      if (data) {
        this.songInfo = data;
        this.processing = false;
      } else {
        this.$showToast("Invalid response from server");
      }
    }).catch(({text}) => {
      this.$showToast(text);
    });
  }
}
</script>

<style scoped>
#cover-art {
  max-width: 100%;
  width: 25vh;
}
</style>