<script type="text/x-template" id="cider-collection-list">
    <div class="content-inner collection-page">
        <h3 class="header-text" v-observe-visibility="{callback: headerVisibility}">{{ title }}</h3>
        <div v-if="data['data'] != 'null'" class="well">
            <template v-for="(item, key) in data.data">
                <template v-if="item.type == 'artists'">
                    <mediaitem-square :item="item"></mediaitem-square>
                </template>
                <template v-else>
                    <mediaitem-list-item
                            v-if="getKind(item) == 'song'"
                            :index="key"
                            :item="item"></mediaitem-list-item>
                    <mediaitem-square v-else :item="item" :type="getKind(item)"></mediaitem-square>
                </template>
            </template>
            <button v-if="triggerEnabled" style="opacity:0;height: 32px;"
                    v-observe-visibility="{callback: visibilityChanged}">{{this.app.getLz('term.showMore')}}
            </button>
        </div>
        <transition name="fabfade">
            <button class="top-fab" v-show="showFab" @click="scrollToTop()">
                <%- include("../svg/arrow-up.svg") %>
            </button>
        </transition>
        <div class="well" v-show="loading"><div class="spinner"></div></div>
    </div>
</script>
<script>
    Vue.component('cider-collection-list', {
        template: "#cider-collection-list",
        props: {
            data: {
                type: Object,
                required: true
            },
            title: {
                type: String,
                required: false
            },
            type: {
                type: String,
                required: false,
                default: "artists"
            }
        },
        data: function () {
            return {
                triggerEnabled: true,
                canSeeTrigger: false,
                showFab: false,
                commonKind: "song",
                api: this.$root.mk.api,
                loading: false,
                app: this.$root,
            }
        },
        methods: {
            getKind(item) {
                if (typeof item.kind != "undefined") {
                    this.commonKind = item.kind;
                    return item.kind
                }
                if (typeof item.attributes.playParams != "undefined") {
                    this.commonKind = item.attributes.playParams.kind
                    return item.attributes.playParams.kind
                }
                return this.commonKind
            },
            scrollToTop() {
                let target = document.querySelector(".header-text")
                document.querySelector("#app-content").scrollTo({
                    top: 0,
                    left: 0,
                    behavior: 'smooth'
                })
            },
            getNext() {
                let self = this
                this.triggerEnabled = false;
                if (typeof this.data.next == "undefined") {
                    return
                }
                this.loading = true

                this.api.v3.music(this.data.next, app.collectionList.requestBody).then((response) => {
                    console.log(response)
                    if (!app.collectionList.response.groups) {
                        this.data.data = this.data.data.concat(response.data.data);
                        if (response.data.next) {
                            this.data.next = response.data.next;
                            this.triggerEnabled = true;
                        }
                        this.loading = false
                    }else{
                        if(!response.data.results[app.collectionList.response.groups]) {
                            this.loading = false
                            return
                        }
                        this.data.data = this.data.data.concat(response.data.results[app.collectionList.response.groups].data);
                        if (response.data.results[app.collectionList.response.groups].next) {
                            this.data.next = response.data.results[app.collectionList.response.groups].next;
                            this.triggerEnabled = true;
                            this.loading = false
                        }
                    }
                })
            },
            headerVisibility: function (isVisible, entry) {
                if (isVisible) {
                    this.showFab = false;
                } else {
                    this.showFab = true;
                }
            },
            visibilityChanged: function (isVisible, entry) {
                if (isVisible) {
                    this.canSeeTrigger = true;
                    this.getNext();
                } else {
                    this.canSeeTrigger = false;
                }
            }
        }
    })
</script>