<template>
  <transition name="fade">
    <a
      class="btn currentlyListening"
      href="	https://spot2gether.cybre.town/user/op3q884heqao7laioz05ebaoz"
      target="_blank"
      ref="noopener noreferrer"
      v-if="currentlyPlaying?.item"
    >
      <div 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>
  </transition>
</template>

<script>
let updateMusicInfo = null;
const noob = () => 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 mounted() {
    this.currentlyPlaying = (await this.fetchMusicInfo().catch(noob))?.currentlyPlaying;
    updateMusicInfo = setInterval(async () => {
      this.currentlyPlaying = (await this.fetchMusicInfo().catch(noob))?.currentlyPlaying;
    }, 10000);
  },
  beforeDestroy() {
    clearInterval(updateMusicInfo);
  },
};
</script>

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