<template>
  <b-container>
    <b-row>
      <b-col>
        <h1>
          <b-button variant="transparent" class="m-1" :to="{name : 'Collections'}">
            <b-icon icon="arrow-left-circle-fill"/>
          </b-button>
          Collection: {{ collectionName }}
        </h1>
      </b-col>
    </b-row>
    <big-chungus-loader text="Fetching track list..." v-if="processing"/>
    <div  class="my-4" v-else>
      <b-row>
        <b-col cols="12" sm="6" lg="3" class="ml-auto">
          <div>
            <b-input v-model="searchTerm" placeholder="Filter"></b-input>
          </div>
        </b-col>
      </b-row>
      <b-row>
        <b-col>

          <b-table :items="filteredList" :fields="fields" hover borderless @row-clicked="rowClicked"
                   tbody-tr-class="clickable-table-row-thing" responsive="md">
            <template #cell(cover_url)="data">
              <b-img-lazy :src="data.item.cover_url_small" height="45px" blank-src="@/assets/music_placeholder.png"
                          v-if="!!data.item.cover_url_small"/>
              <b-img src="@/assets/music_placeholder.png" height="45px" v-else/>
            </template>

            <template #cell(id)="data">
              <div class="text-right">
                <b-button variant="success" :disabled="!data.item.spotify_id"
                          @click="startPlayer(data.item.spotify_id)">
                  <b-icon icon="play-fill"/>
                  Play
                </b-button>
              </div>
            </template>
          </b-table>

          <div v-if="totalPages > 1">
            <b-pagination-nav :number-of-pages="totalPages" use-router align="center"
                              :link-gen="paginateLinkGenerator"/>
          </div>

        </b-col>
      </b-row>
    </div>
  </b-container>
</template>

<script>
import BigChungusLoader from "@/components/BigChungusLoader";

export default {
  name: "Collection",
  components: {
    BigChungusLoader
  },
  data() {
    return {
      processing: true,
      collectionName: "",
      totalItems: 0,
      itemsPerPage: 10,
      searchTerm: "",
      fields: [
        {
          key: "cover_url",
          label: "Cover"
        },
        "artist",
        "album",
        "title",
        {
          key: "id",
          label: ""
        }
      ],
      tracklist: []
    }
  },
  methods: {
    rowClicked(data) {
      this.$router.push(
          {
            name: 'Item',
            params: {
              id: data.id
            },
            query: {
              collection: this.$route.params.id,
              srcpage: this.$route.query.p
            }
          }
      );
    },
    startPlayer(spotify_id) {
      this.$store.dispatch('openPlayer', spotify_id);
    },
    paginateLinkGenerator(pageNum) {
      if (pageNum === 1) {
        return {query: {}};
      } else {
        return {query: {p: pageNum}};
      }
    }
  },
  mounted() {
    const page = this.$route.query.p || 1;
    const offset = (page - 1) * this.itemsPerPage;

    this.$api.getList(this.$route.params.id, offset, this.itemsPerPage).then((data) => {
      if (data) {
        this.tracklist = data.itemlist;
        this.collectionName = data.name;
        this.totalItems = data.element_count;
        this.processing = false;
      } else {
        this.$showToast("Invalid response from server");
      }
    }).catch(({text}) => {
      this.$showToast(text);
    });
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.itemsPerPage);
    },
    filteredList() {

      if (!this.searchTerm) {
        return this.tracklist;
      }

      return this.tracklist.filter(item => {
        if (item.title.toLowerCase().includes(this.searchTerm.toLowerCase())) {
          return true;
        }
        if (item.album.toLowerCase().includes(this.searchTerm.toLowerCase())) {
          return true;
        }
        if (item.artist.toLowerCase().includes(this.searchTerm.toLowerCase())) {
          return true;
        }
        return false;
      })
    }
  }
}

</script>

<style>
/* Should be scoped, but that could not change row style*/
.clickable-table-row-thing {
  cursor: pointer;
}
</style>