<template>
  <div class="text-xs-center">
    <v-dialog v-model="show" width="250">
      <v-card>
        <DialogHeading title="Section Info">
          <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 v-model="name" label="Name" required></v-text-field>
          {{sectionModelCount}} {{sectionModelCount | pluralize('model') }}<br/>
          {{sectionMaterialCount}} {{sectionMaterialCount | pluralize('material') }}
        </v-card-text>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" flat @click="show = false">OK</v-btn>
          <v-spacer></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,
  },
  data: () => ({
  }),
  props: {
    value: Boolean,
  },
  computed: {
    show: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    },

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

    sectionModelCount() {
      let section = this.selectedSection()
      if (section) {
        let modelFunc = this.sectionModels()
        let models = modelFunc(section)
        if (models) {
          return models.length
        }
      }
      return 0
    },

    sectionMaterialCount() {
      let count = 0
      let section = this.selectedSection()
      if (section) {
        let modelFunc = this.sectionModels()
        let models = modelFunc(section)
        if (models) {
          for (let model of models) {
            if (model.ids) {
              count += model.ids.length
            }
          }
        }
      }
      return count
    },

      }
    },

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

<style>

</style>
