<template>
  <a
    class="btn currentlyListening"
    href="	https://spot2gether.cybre.town/user/op3q884heqao7laioz05ebaoz"
    target="_blank"
    ref="noopener noreferrer"
  >
    <div v-if="currentlyPlaying?.item" class="row align-items-center">
      <i class="bi-music-note col-auto icon" />
      <div class="col-auto d-flex flex-column text">
        <b>{{ currentlyPlaying?.item?.name }}</b>
        <div>{{ currentlyPlaying?.item?.artists.map(artist => artist.name).join(', ') }}</div>
      </div>
    </div>
  </a>
</template>

<script>
let updateMusicInfo = null;

export default {
  name: "CurrentlyListening",
  data: () => ({
    currentlyPlaying: null,
  }),
  methods: {
    async fetchMusicInfo() {
      return await fetch(
          'https://spot2gether.cybre.town/api/public/users/op3q884heqao7laioz05ebaoz/info'
      ).then(data => data.json());
    }
  },
  async created() {
    this.currentlyPlaying = (await this.fetchMusicInfo())?.currentlyPlaying;
    updateMusicInfo = setInterval(async () => {
      this.currentlyPlaying = (await this.fetchMusicInfo())?.currentlyPlaying;
    }, 20000);
  },
  beforeDestroy() {
    clearInterval(updateMusicInfo);
  },
};
</script>

<style lang="scss">
.currentlyListening {
  position: relative;
  .icon {
    font-size: 1.2rem;
  }
  .text {
    font-size: .8rem;
    text-align: left !important;
  }
}
</style>
