<template>
  <v-form ref="form" v-model="valid">
    <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-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/>
          <v-spacer/>
          <v-btn text @click="popExit()">Cancel</v-btn>
          <v-btn
            :disabled="!valid"
            color="primary"
            class="black--text"
            @click="step = 2">Next</v-btn>
        </v-stepper-content>

        <v-stepper-content step="2">
          <CatalogContents/>
          <v-spacer/>
          <v-btn text @click="popExit()">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-btn
            :disabled="!valid"
            :loading="savingCatalog"
            color="primary"
            class="black--text"
            @click.stop="saveCatalog()">Done</v-btn>
        </v-stepper-content>

        <!-- <v-stepper-content step="3">
             <CatalogPagination/>
             <v-btn text>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>

    <ExitEditorDialog v-model="showExitEditorPopup"/>

    <v-snackbar v-model="showPublicNotice" color="success"
                multi-line top :timeout="10000">
      This is a public catalog.<br>
      Changes will be saved in a new catalog that you own.
      <v-btn dark text @click="showPublicNotice = false">Close</v-btn>
    </v-snackbar>

  </v-form>
</template>

<script>
import { mapState } from 'vuex'
import Loading from './Loading'
import CatalogInfo from './CatalogInfo'
import CatalogContents from './CatalogContents'
/* import CatalogPagination from './CatalogPagination' */
import ExitEditorDialog from './ExitEditorDialog'

export default {
  components: {
    Loading,
    CatalogInfo,
    CatalogContents,
    /*     CatalogPagination, */
    ExitEditorDialog,
  },
  data: () => ({
    step: 1,
    valid: false, // is the whole editor in a valid state?
    showExitEditorPopup: false,
    showPublicNotice: false,
  }),
  computed: {
    loadingCatalog() {
      return this.$store.getters.loadingCatalog
    },
    savingCatalog() {
      return this.$store.getters.savingCatalog
    },
    ...mapState([
      'catalog',
      'catalogSavedOK',
    ]),
  },
  watch: {
    catalog(value) {
      if (value) {
        var userID = JSON.parse(document.getElementById('userID').textContent)
        console.log('catalog changed', value.owner, userID)
        if (value.owner && value.owner !== userID) {
          this.showPublicNotice = true
        }
      }
    },
    catalogSavedOK(value) {
      if (value) {
        console.log('catalog saved.  redirecting to catalog list...')
        window.location.href = '/catalogs'
      }
    }
  },
  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')
    }
  },
  methods: {
    popExit: function(id) {
      this.showExitEditorPopup = true
    },
    saveCatalog() {
      this.$store.dispatch('saveCatalog')
    },
  }
}
</script>

<style>

</style>
