<template>
  <v-card>
    <v-card class="subheading font-weight-bold pa-2" color="grey lighten-2">
      Sections
    </v-card>

    <!-- <v-toolbar dense>
         <v-toolbar-title>Sections</v-toolbar-title>
         <v-spacer></v-spacer>
         <v-btn icon>
         <v-tooltip top>
         <template v-slot:activator="{ on }">
         <v-icon v-on="on">add</v-icon>
         </template>
         <span>Add new section</span>
         </v-tooltip>
         </v-btn>
         </v-toolbar> -->

    <v-card flat class="scroll-area">
    <draggable v-model="sections" group="categories">
      <div v-for="item in sections" :key="item.id">
        <v-hover :key="item.id">
          <v-list-tile
            slot-scope="{ hover }"
            :class="listItemClasses(item.id, hover)"
            @click="selectSection(item.id)"
          >
            <v-list-tile-content>
              <v-list-tile-title v-html="item.name"></v-list-tile-title>
                <v-list-tile-sub-title
                  class="caption font-weight-light"
                  color="grey lighten-2">
                  12 models
                </v-list-tile-sub-title>
            </v-list-tile-content>

            <v-list-tile-action>
              <span class="group">
                <v-btn icon @click.stop="popInfo(item.id)">
                  <v-icon small color="grey lighten-1">info</v-icon>
                </v-btn>
                <v-btn icon @click.stop="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>

    <SectionInfoDialog v-model="showSectionPopup" v-bind:section="selectedSectionID"/>
    <SectionDeleteDialog v-model="showDeleteSectionPopup" v-bind:section="selectedSectionID"/>

    <!--<v-flex xs5>
         <RawDisplayer :value="sections" 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: {
    selected: Number
  },
  data: () => ({
    showSectionPopup: false,
    showDeleteSectionPopup: false,
  }),
  computed: {
    sections: {
      get () {
        return this.$store.getters.CAT_SECTIONS
      },
      set (value) {
        this.$store.dispatch('SET_CAT_SECTIONS', value)
      }
    },
  },
  methods: {
    listChoose: function (evt) {
      var id = Number(evt.item.firstChild.getAttribute('sectionid'))
      this.selectSection(id)
    },
    listItemClasses: function (id, hovering) {
      if (id === this.selectedSectionID) {
        return 'primary'
      } else if (hovering) {
        return 'grey lighten-4'
      } else {
        return ''
      }
    },
    popInfo: function (id) {
      this.selectSection(id)
      this.showSectionPopup = true
    },
    popDelete: function (id) {
      this.selectSection(id)
      this.showDeleteSectionPopup = true
    }
  }
}
</script>

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