<template>
  <div class="text-xs-center">
    <v-dialog v-model="show" width="250">
      <v-card>

        <v-card class="subheading font-weight-bold ma-0 pa-0 white--text" color="keen_dark_grey">
          <v-card-title class="ma-0 pa-2 pl-3">
            Add Materials
            <v-spacer></v-spacer>
            <v-icon color="white" @click="show = false">clear</v-icon>
          </v-card-title>
        </v-card>

        <v-card-text>
          <p>Enter material numbers to add to the catalog</p>
          <v-textarea
            v-model="text"
            autofocus
            label="Material numbers"
            placeholder="1001234
1001235..."
            clearable
          ></v-textarea>
        </v-card-text>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn small flat @click="show = false">Cancel</v-btn>
          <v-spacer></v-spacer>
          <v-btn small flat color="primary" @click="doAdd()">Add</v-btn>
          <v-spacer></v-spacer>
        </v-card-actions>

      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  data: () => ({
    text: null,
  }),
  props: {
    value: Boolean,
  },
  computed: {
    show: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    },
  },
  methods: {
    ...mapActions([
      'fetchProducts',
    ]),

    doAdd: function() {
      console.log('adding text', this.text)
      this.show = false
      this.fetchProducts(this.text)
    },

  },
}
</script>
