<template>
  <v-row justify="center">
    <v-dialog v-model="show" max-width="250">
      <v-card>
        <DialogHeading title="Remove Material">
          <v-btn icon class="ma-0 pa-0" @click="show = false">
            <v-icon color="white">clear</v-icon>
          </v-btn>
        </DialogHeading>

        <v-card-text>
          Really remove material from model?
          <div class="subheading mt-2">
            <span class="font-weight-medium">{{ id }}</span> {{ name }}
          </div>
          <div class="body">{{ color }}</div>
        </v-card-text>

        <v-card-actions>
          <v-spacer/>
          <v-btn text @click="show = false">Cancel</v-btn>
          <v-btn color="primary" text @click="doDelete()">OK</v-btn>
          <v-spacer/>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>
</template>

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

export default {
  components: {
    DialogHeading,
  },
  props: {
    value: Boolean,
  },
  data: () => ({
  }),
  computed: {
    ...mapGetters([
      'selectedSection',
      'selectedModel',
      'selectedMaterial',
    ]),

    show: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    },

    name: {
      get() {
        let mat = this.selectedMaterial
        return mat ? mat.name : '(none)'
      }
    },

    id: {
      get() {
        let mat = this.selectedMaterial
        return mat ? mat.id : '(none)'
      }
    },

    color: {
      get() {
        let mat = this.selectedMaterial
        return mat ? mat.color : '(none)'
      }
    },

  },
  methods: {
    ...mapActions([
      'deleteModelMaterial',
    ]),

    doDelete() {
      this.deleteModelMaterial({ section: this.selectedSection,
                                 material: this.selectedMaterial })
      this.show = false
    },
  },
}
</script>

<style>

</style>
