<template>
  <b-container>
    <b-row>
      <b-col>
        <h1>My Collections</h1>
      </b-col>
    </b-row>
    <big-chungus-loader text="Fetching collections..." v-if="processing"/>
    <b-row v-else>
      <collections-list-element :title="c.name" :count="c.element_count" :type="c.type" @click="openCollection(c.id)"
                                :key="c.id" v-for="c in collections"/>
    </b-row>
  </b-container>
</template>

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

export default {
  name: 'Collections',
  components: {BigChungusLoader, CollectionsListElement},
  data() {
    return {
      processing: true,
      collections: {}
    }
  },
  methods: {
    openCollection(id) {
      this.$router.push({name: "Collection", params: {id}})
    }
  },
  mounted() {
    this.$api.getAllLists().then((data) => {
      if (data) {
        this.collections = data.ids;
        this.processing = false;
      } else {
        this.$showToast("Invalid response from server");
      }
    }).catch(({text}) => {
      this.$showToast(text);
    });

  }
}
</script>
