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

        <v-card-text>
          <v-text-field v-model="name" label="Name" required/>
          {{ modelMaterialCount }} {{ modelMaterialCount | pluralize('material') }}
        </v-card-text>

        <v-card-actions>
          <v-spacer/>
          <v-btn color="primary" text @click="show = false">OK</v-btn>
          <v-spacer/>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

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

export default {
  components: {
    DialogHeading,
  },
  props: {
    value: Boolean,
  },
  data: () => ({
  }),
  computed: {
    show: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    },

    name: {
      get() {
        var model = this.selectedModel()
        return model ? model.name : '(none)'
      },
      set(value) {
        var section = this.selectedSection()
        var model = this.selectedModel()
        this.setModelName({ section: section, model: model, name: value })
      }
    },

    modelMaterialCount() {
      let model = this.selectedModel()
      if (model) {
        return model.ids.length
      }
      return 0
    },
  },

  methods: {
    ...mapGetters([
      'selectedSection',
      'selectedModel',
    ]),
    ...mapActions([
      'setModelName',
    ]),
  },
}
</script>

<style>

</style>
