<template>
  <v-expansion-panel-content>
    <template v-slot:header>
      <span class="subheading">New Deck</span>
    </template>

    <v-container>
      <v-card flat>
        <DeckEditor ref="editor" @save="save_deck" />
      </v-card>
    </v-container>
  </v-expansion-panel-content>
</template>

<script>
import * as Cookies from 'js-cookie'
import axios from '@/plugins/axios'

import DeckEditor from './forms/DeckEditor.vue'

export default {
  name: 'NewDeck',

  components: {
    DeckEditor
  },

  computed: {
    session: () => Cookies.get('session')
  },

  methods: {
    save_deck(new_deck) {
      axios
        .post('/decks/add', {
          session: this.session,
          deckCards: new_deck.plainObject()
        })
        .then(response => {
          if (response.data.success) {
            this.$emit('change')
            this.$refs.editor.clear()
          }
        })
    }
  }
}
</script>
