<script type="text/x-template" id="cider-radio">
    <div class="content-inner">
        <h1 class="header-text">{{$root.getLz("term.radio")}}</h1>
        <template v-if="data.relationships && data.relationships.tabs">
            <template v-for="(recom,index) in data.relationships.tabs.data[0].relationships.children.data">
                <div class="row">
                    <div class="col" v-if="recom.attributes.name != 'Chart Set'">
                        <h3>{{ recom.attributes.name ?? ""}}</h3>
                    </div>
                    <div class="col-auto cider-flex-center">
                        <button class="cd-btn-seeall" v-if="recom.attributes.name == 'Recently Played' && recent.length > 10"
                                @click="app.showCollection({ data: recent }, recom.attributes.name ?? '', 'listen_now')">
                            {{app.getLz('term.seeAll')}}
                        </button>
                        <template v-if="index != 0 && recom.relationships && ((recom.relationships.children &&  recom.relationships.children.data.length > 10) || (recom.relationships.contents && recom.relationships.contents.data.length > 10))">
                            <button class="cd-btn-seeall" v-if="recom.relationships.room"
                                    @click="app.showRoom(recom.relationships.room?.data[0].href)">
                                {{app.getLz('term.seeAll')}}
                            </button>
                            <button class="cd-btn-seeall" v-else
                                    @click="app.showCollection(recom.relationships.children ? recom.relationships.children : recom.relationships.contents, recom.attributes.name ?? '', 'listen_now')">
                                {{app.getLz('term.seeAll')}}
                            </button>
                        </template>
                    </div>
                </div>

                <div v-if="recom.attributes.name == 'Recently Played'">
                    <mediaitem-scroller-horizontal-mvview :imagesize="800"
                                                          :browsesp="index == 0|| (data.relationships.tabs.data[0].relationships.children.data[0].relationships == null && index === 1)"
                                                          :kind="recom.attributes.editorialElementKind"
                                                          :items="recent.limit(10)"></mediaitem-scroller-horizontal-mvview>
                </div>
                <template v-else-if="(recom.relationships != null && ((recom.relationships.children && recom.relationships.children.data) || (recom.relationships.contents && recom.relationships.contents.data)))">
                    <template v-if="index === 0|| (data.relationships.tabs.data[0].relationships.children.data[0].relationships == null && index === 1)">
                        <mediaitem-scroller-horizontal-mvview :imagesize="800"
                                                              :browsesp="index == 0|| (data.relationships.tabs.data[0].relationships.children.data[0].relationships == null && index === 1)"
                                                              :kind="recom.attributes.editorialElementKind"
                                                              :items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-mvview>
                    </template>
                    <template v-else-if="(['327']).includes(recom.attributes.editorialElementKind)">
                        <div class="mediaitem-list-item__grid">
                            <listitem-horizontal :items="recom.relationships.contents.data.limit(20)">
                            </listitem-horizontal>
                        </div>
                    </template>
                    <template v-else-if="(['385']).includes(recom.attributes.editorialElementKind)">
                        <mediaitem-scroller-horizontal-mvview :imagesize="800"
                                                              :kind="recom.attributes.editorialElementKind"
                                                              :items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-mvview>
                    </template>
                    <template v-else-if="recom.attributes.name == 'Chart Set'">
                        <!-- ignored -->
                    </template>
                    <template v-else-if="(['488']).includes(recom.attributes.editorialElementKind)">
                        <!-- ignored -->
                    </template>
                    <template v-else>
                        <mediaitem-scroller-horizontal-large
                                :items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-large>
                    </template>
                </template>
                <template v-else>
                    <template v-if="recom.attributes.links && recom.attributes.editorialElementKind.includes('391')">
                        <div class="grouping-container">
                            <button class="grouping-btn" @click="$root.goToGrouping(link.url)"
                                    v-for="link in recom.attributes.links">{{ link.label }}
                            </button>
                        </div>
                    </template>
                </template>
            </template>
        </template>
    </div>
</script>

<script>
  Vue.component('cider-radio', {
    template: "#cider-radio",
    props: ["data"],
    data: function() {
      return {
        app: this.$root,
        recent: []
      };
    },
    mounted() {
      this.$root.getRadioPage();
    //   debugger
      this.getRecentlyPlayed();
    //   debugger
    },
    methods: {
      getRecentlyPlayed: async function (next = null) {
        const recent = await app.mk.api.v3.music(`${next ?? "/v1/me/recent/radio-stations"}`, {
          "platform": "web",
          "art[url]": "f",
          l: app.mklang
        })

        console.debug(recent.data.data)
        this.recent = this.recent.concat(recent.data.data);

        if (recent.data.next) {
            this.getRecentlyPlayed(recent.data.next);
        }
      }
    }
  });
</script>
