<script type="text/x-template" id="artist-chip">
    <div class="artist-chip" @click.self="route" tabindex="0">
        <div class="artist-chip__image" v-if="image"
             :style="{backgroundColor: '#' + (artist.attributes.artwork?.bgColor ?? '000')}">
            <mediaitem-artwork v-if="artist.id != null" :url="artist.attributes.artwork.url"
                               :size="80"></mediaitem-artwork>
        </div>
        <div class="artist-chip__image" v-else>
        </div>
        <div class="artist-chip__name">
            <span>{{ item.attributes.name }}</span>
        </div>
        <button @click="$root.setArtistFavorite(artist.id, true)" title="Follow"
                v-if="!$root.followingArtist(artist.id)" class="artist-chip__follow codicon codicon-add"></button>
        <button @click="$root.setArtistFavorite(artist.id, false)" title="Following" v-else
                class="artist-chip__follow codicon codicon-check"></button>
    </div>
</script>

<script>
  Vue.component('artist-chip', {
    props: {
      item: {
        type: Object,
        required: true
      }
    },
    data: function() {
      return {
        image: false,
        artist: {
          id: null
        }
      }
    },
    template: '#artist-chip',
    async mounted() {
      let artistId = this.item.id
      if (typeof this.item.relationships == "object") {
        artistId = this.item.relationships.catalog.data[0].id
      }
      app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/artists/${artistId}`).then(response => {
        this.artist = response.data.data[0];
        this.image = true;
      });
    },
    methods: {
      route() {
        app.appRoute(`artist/${this.artist.id}`);
      }
    }
  });
</script>
