<script type="text/x-template" id="cider-artist-feed">
    <div class="content-inner">
        <div>
            <div class="row">
                <div class="col">
                    <div class="row nopadding">
                        <div class="col nopadding">
                            <h3>{{app.getLz('home.followedArtists')}}</h3>
                        </div>
                    </div>
                    <div class="well">
                        <mediaitem-scroller-horizontal>
                            <div v-for="artist in artists" style="margin: 6px;">
                                <mediaitem-square :item="artist" kind="small"></mediaitem-square>
                                <button @click="unfollow(artist.id)" class="md-btn md-btn-glyph" style="display:flex;">
                                    <div class="sidebar-icon">
                                        <div class="svg-icon" :style="{'--url': 'url(./assets/feather/x-circle.svg)'}"></div>
                                    </div> {{app.getLz('action.unfollow')}}
                                </button>
                            </div>
                        </mediaitem-scroller-horizontal>
                    </div>
                </div>
            </div>
        </div>


        <div>
            <div class="row">
                <div class="col">
                    <div class="row nopadding">
                        <div class="col nopadding">
                            <h3>{{app.getLz('home.artistsFeed')}}</h3>
                        </div>
                    </div>
                    <div class="well" style="margin-top:0;">
                        <template v-if="artistFeed.length > 0">
                            <mediaitem-list-item v-for="item in artistFeed" :item="item"></mediaitem-list-item>
                        </template>
                        <template v-else>
                            <div class="spinner"></div>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>

<script>
    Vue.component('cider-artist-feed', {
        template: '#cider-artist-feed',
        data: function () {
            return {
                app: this.$root,
                followedArtists: this.$root.cfg.home.followedArtists,
                artistFeed: [],
                artists: []
            }
        },
        async mounted() {
            let self = this
            await this.getArtistFeed()
        },
        methods: {
            unfollow(id) {
                let index = this.followedArtists.indexOf(id)
                if (index > -1) {
                    this.followedArtists.splice(index, 1)
                }
                let artist = this.artists.find(a => a.id == id)
                let index2 = this.artists.indexOf(artist)
                if (index2 > -1) {
                    this.artists.splice(index2, 1)
                }
                this.getArtistFeed()
            },
            async getArtistFeed() {
                let artists = this.followedArtists
                let self = this
                this.artists = []
                this.artistFeed = []
                this.app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/artists?ids=${artists.toString()}&views=latest-release&include[songs]=albums&fields[albums]=artistName,artistUrl,artwork,contentRating,editorialArtwork,editorialVideo,name,playParams,releaseDate,url,trackCount&limit[artists:top-songs]=2&art[url]=f`).then(artistData => {
                    artistData.data.data.forEach(item => {
                        self.artists.push(item)
                        if (item.views["latest-release"].data.length != 0) {
                            self.artistFeed.push(item.views["latest-release"].data[0])
                        }
                    })
                    // sort artistFeed by attributes.releaseDate descending, date is formatted as "YYYY-MM-DD"
                    this.artistFeed.sort((a, b) => {
                        let dateA = new Date(a.attributes.releaseDate)
                        let dateB = new Date(b.attributes.releaseDate)
                        return dateB - dateA
                    })
                })

            }
        }
    });
</script>