<template>
  <v-stepper v-model="step">

    <Loading text="Loading" :show="loadingCatalog"/>

    <v-stepper-header ma-0 pa-0>
      <v-stepper-step :complete="step > 1" step="1">Catalog info</v-stepper-step>
      <v-divider></v-divider>
      <v-stepper-step :complete="step > 2" step="2">Contents</v-stepper-step>
      <v-divider></v-divider>
      <v-stepper-step step="3">Pagination</v-stepper-step>
    </v-stepper-header>

    <v-stepper-items>
      <v-stepper-content step="1">
        <!-- <CatalogInfo/> -->
        <CatalogContents/>
        <v-btn flat>Cancel</v-btn>
        <v-btn @click="step = 1" disabled>Back</v-btn>
        <v-btn @click="step = 2" color="primary" class="black--text">Next</v-btn>
      </v-stepper-content>

      <v-stepper-content step="2">
        <CatalogContents/>
        <v-btn flat>Cancel</v-btn>
        <v-btn @click="step = 1">Back</v-btn>
        <v-btn @click="step = 3" color="primary" class="black--text">Next</v-btn>
      </v-stepper-content>

      <v-stepper-content step="3">
        <v-card
          class="mb-5"
          color="grey lighten-1"
          height="200px"
        ></v-card>

        <v-btn flat>Cancel</v-btn>
        <v-btn @click="step = 2">Back</v-btn>
        <v-btn color="primary" class="black--text">Save</v-btn>
      </v-stepper-content>
    </v-stepper-items>

  </v-stepper>
</template>

<script>
import Loading from './Loading'
import CatalogInfo from './CatalogInfo'
import CatalogContents from './CatalogContents'

export default {
  components: {
    Loading,
    CatalogInfo,
    CatalogContents
  },
  data: () => ({
    step: 1,
  }),
  computed: {
    loadingCatalog() {
      return this.$store.getters.loadingCatalog
    },
    savingCatalog() {
      return this.$store.getters.savingCatalog
    },
  },
  methods: {
    saveCatalog() {
      this.$store.dispatch('saveCatalog')
    },
  },
  mounted: function() {
    // catalogID is set by django
    // in a script block in our parent page.
    var catalogID = JSON.parse(document.getElementById('catalogID').textContent)
    if (catalogID > 0) {
      this.$store.dispatch('loadCatalog', catalogID)
    } else {
      this.$store.dispatch('newCatalog')
    }
  }
}
</script>

<style>

</style>
