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

        <v-card-text class="ma-0 pa-0">

          <v-tabs v-model="tab" grow>
            <v-tab>By ID</v-tab>
            <v-tab>By Name</v-tab>
            <v-tab>From Catalog</v-tab>
          </v-tabs>

          <v-tabs-items v-model="tab">
            <v-tab-item>
              <AddMaterialPanel v-model="materialText"/>
            </v-tab-item>
            <v-tab-item>
              <AddModelPanel v-model="models"/>
            </v-tab-item>
            <v-tab-item>
              <AddCatalogPanel v-model="catalog"/>
            </v-tab-item>
          </v-tabs-items>
        </v-card-text>

        <v-card-actions>
          <v-spacer/>
          <v-btn depressed @click="show = false">Cancel</v-btn>
          <v-spacer/>
          <v-btn depressed color="primary" class="black--text" @click="doAdd()">Add</v-btn>
          <v-spacer/>
        </v-card-actions>

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

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

export default {
  components: {
    AddMaterialPanel,
    AddModelPanel,
    AddCatalogPanel,
    DialogHeading,
  },
  props: {
    value: Boolean,
  },
  data: () => ({
    tab: 1,
    materialText: '',
    models: [],
    catalog: null,
  }),
  computed: {
    show: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    },
  },
  methods: {
    ...mapActions([
      'fetchProducts',
    ]),
    doAdd: function() {
      if (this.tab === 0) {
        this.fetchProducts(this.materialText)
      } else if (this.tab === 1) {
        console.log('adding models', this.models)
      } else {
        console.log('adding from catalog', this.catalog)
      }
      /*       this.show = false */
    },

  },
}
</script>
