<template>
  <v-card>
    <v-card class="subheading font-weight-bold pa-2" color="grey lighten-2">
      Styles
    </v-card>
    <!-- <v-toolbar dense>
         <v-toolbar-title>Categories</v-toolbar-title>
         <v-spacer></v-spacer>
         <v-btn icon><v-icon>add</v-icon></v-btn>
         </v-toolbar> -->

    <v-card flat class="scroll-area">
    <draggable v-model="materials" group="materials">
      <div v-for="item in materials" :key="item.id">
        <v-hover
          :key="item.id"
          :materialid="item.id">
          <v-list-tile
            slot-scope="{ hover }"
            :class="listItemClasses(item.id, hover)"
            @click="selectMaterial(item.id)"
          >
            <v-list-tile-content>
              <v-list-tile-title><b>{{ item.id }}</b> {{ item.name }}</v-list-tile-title>
              <v-list-tile-sub-title v-html="item.color"></v-list-tile-sub-title>
            </v-list-tile-content>

            <v-list-tile-action>
              <span class="group">
                <v-btn icon @click="popInfo(item.id)">
                  <v-icon small color="grey lighten-1">info</v-icon>
                </v-btn>
                <v-btn icon @click="popDelete(item.id)">
                  <v-icon small color="grey lighten-1">delete</v-icon>
                </v-btn>
              </span>
            </v-list-tile-action>

          </v-list-tile>
        </v-hover>
      </div>
    </draggable>
    </v-card>

    <!-- <v-flex xs5>
         <RawDisplayer :value="materials" title="Data" />
         </v-flex> -->

  </v-card>
</template>

<script>
import draggable from 'vuedraggable'
import SelectionMixin from './SelectionMixin'
/* import RawDisplayer from './RawDisplayer' */
/* import SectionInfoDialog from './SectionInfoDialog'
 * import SectionDeleteDialog from './SectionDeleteDialog' */

export default {
  mixins: [SelectionMixin],
  components: {
    draggable,
    /* SectionInfoDialog,
     * SectionDeleteDialog, */
    /*     RawDisplayer */
  },
  /* props: {
   * }, */
  /* data: () => ({
   * }), */
  computed: {
    materials: {
      get () {
        if (this.selectedFamilyID != null) {
          let family = this.selectedFamily()
          return this.findMaterials(family.materials)
        } else if (this.selectedModelID != null) {
          // TODO
          return []
        } else {
          return []
        }
      },
      /* set (value) {
       *   // TODO complicated logic
       * } */
    },
  },
  methods: {
    listItemClasses: function (id, hovering) {
      /* if (id === this.selectedMaterial) {
         return 'primary'
         } else */
      if (hovering) {
        return 'grey lighten-4'
      } else {
        return ''
      }
    },
    popInfo: function (id) {
      this.selectMaterial(id)
      //this.showSectionPopup = true
    },
    popDelete: function (id) {
      this.selectMaterial(id)
      //this.showDeleteSectionPopup = true
    },
  }
}
</script>

<style scoped>
.scroll-area {
  height: 300px;
  overflow-y: auto;
}
</style>
