<template>
  <div class="text-xs-center">
    <v-dialog v-model="show" width="300">
      <v-form v-model="valid">
        <v-card>
          <DialogHeading title="Add Section">
            <v-btn icon @click="show = false" class="ma-0 pa-0">
              <v-icon color="white">clear</v-icon>
            </v-btn>
          </DialogHeading>

          <v-card-text>
            <v-text-field
              :rules="[v => !!v || 'Required']"
              v-model="name"
              label="Name"
              v-on:keydown.enter.prevent="doNewSection()"
              autofocus
              required>
            </v-text-field>
          </v-card-text>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn flat @click="show = false">Cancel</v-btn>
            <v-btn
              :disabled="!valid"
              color="primary"
              flat
              @click="doNewSection()">OK</v-btn>
            <v-spacer></v-spacer>
          </v-card-actions>
        </v-card>
      </v-form>
    </v-dialog>
  </div>
</template>

<script>
import DialogHeading from './DialogHeading'
import { mapActions } from 'vuex'

export default {
  components: {
    DialogHeading,
  },
  data: () => ({
    name: '',
    valid: false,
  }),
  props: {
    value: Boolean,
  },
  computed: {
    show: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    },
  },
  methods: {
    ...mapActions([
      'newSection',
    ]),
    doNewSection() {
      if (this.name) {
        this.newSection(this.name)
      }
      this.name = ''
      this.show = false
    }
  },
}
</script>

<style>

</style>
