<template>
  <v-container fluid grid-list-lg ma-0 pa-1>

    <v-layout row fill-height>
      <v-btn @click="showAddProductDialog = true">Add products</v-btn>
    </v-layout>

    <v-layout row fill-height>
      <v-flex xs4>
        <v-card>
          <DragListHeading title="Sections">
            <v-btn @click="showAddSectionDialog = true" icon class="ma-0 pa-0">
              <v-icon>add</v-icon>
            </v-btn>
          </DragListHeading>

          <div id="sections" class="list-group">
            <div v-for="item in sections" :key="item.id">
              <v-hover :key="item.id">
                <v-list-tile
                  slot-scope="{ hover }"
                  :class="sectionListItemClasses(item.id, hover)"
                  @click="selectSection(item.id)"
                >
                  <!-- TODO try move sectionparent into v-list-title
                       and so section-drop can cover all interior
                  -->
                  <v-list-tile-content class="section-parent">
                    <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"
                    >
                      {{sectionModelCount(item.id)}} {{sectionModelCount(item.id) | pluralize('model') }}
                    </v-list-tile-sub-title>
                    <v-list-tile-sub-title class="section-drop" :section-id="item.id"></v-list-tile-sub-title>
                  </v-list-tile-content>

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

      <v-flex xs4>
        <v-card>
          <DragListHeading title="Models" />

          <div id="models" class="list-group">
            <div v-for="item in selectedModels" :key="item.model">
              <v-hover :key="item.model">
                <v-list-tile
                  slot-scope="{ hover }"
                  :class="modelListItemClasses(item.model, hover)"
                  @click="selectModel(item.model)"
                >
                  <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">
                      {{item.ids.length}} {{item.ids.length | pluralize('material') }}
                    </v-list-tile-sub-title>
                  </v-list-tile-content>

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

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

      <v-flex xs4>
        <v-card>
          <DragListHeading title="Materials" />

          <div id="materials" class="list-group">
            <div v-for="item in selectedMaterials" :key="item.id">
              <v-hover :key="item.id">
                <v-list-tile
                  @click="selectMaterial(item.id)"
                  slot-scope="{ hover }"
                  :class="materialListItemClasses(item.id, hover)"
                >
                  <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>
          </div>
        </v-card>

      </v-flex>

    </v-layout>

    <AddProductDialog v-model="showAddProductDialog"/>
    <AddSectionDialog v-model="showAddSectionDialog"/>
    <SectionInfoDialog v-model="showSectionInfoDialog"/>
    <SectionDeleteDialog v-model="showSectionDeleteDialog"/>
    <ModelInfoDialog v-model="showModelInfoDialog"/>
    <ModelDeleteDialog v-model="showModelDeleteDialog"/>

  </v-container>
</template>

<script>
import Sortable from 'sortablejs'
import { mapState, mapGetters, mapActions } from 'vuex'
import arrayMove from 'array-move'
//import RawDisplayer from './RawDisplayer'
import { paginateModels } from '@/pagination'
import DragListHeading from './DragListHeading'
import AddProductDialog from './AddProductDialog'
import AddSectionDialog from './AddSectionDialog'
import SectionInfoDialog from './SectionInfoDialog'
import SectionDeleteDialog from './SectionDeleteDialog'
import ModelInfoDialog from './ModelInfoDialog'
import ModelDeleteDialog from './ModelDeleteDialog'

export default {
  components: {
    DragListHeading,
    AddProductDialog,
    AddSectionDialog,
    SectionInfoDialog,
    SectionDeleteDialog,
    ModelInfoDialog,
    ModelDeleteDialog,
    //RawDisplayer,
  },

  data: () => ({
    showAddProductDialog: false,
    showAddSectionDialog: false,
    showSectionInfoDialog: false,
    showSectionDeleteDialog: false,
    showModelInfoDialog: false,
    showModelDeleteDialog: false,
  }),
  computed: {
    ...mapState([
      'catalog',
      'materials',
      'selectedSectionID',
      'selectedModelID',
      'selectedMaterialID',
    ]),
    ...mapGetters([
      'section',
      'sections',
      'selectedSection',
      'selectedModel',
      'selectedMaterial',
      'sectionModels',
      'modelMaterials',
      'material',
    ]),
    selectedModels() {
      let section = this.selectedSection
      return this.sectionModels(section)
    },
    selectedMaterials() {
      let model = this.selectedModel
      return this.modelMaterials(model)
    },
  },

  methods: {
    sectionModelCount(sectionID) {
      let section = this.section(sectionID)
      if (section) {
        let models = this.sectionModels(section) || []
        return models.length
      } else {
        return 0
      }
    },

    sectionListItemClasses(id, hovering) {
      if (id === this.selectedSectionID) {
        return 'list-item primary'
      } else if (hovering) {
        return 'list-item grey lighten-4'
      } else {
        return 'list-item'
      }
    },

    modelListItemClasses(id, hovering) {
      if (id === this.selectedModelID) {
        return 'list-item primary'
      } else if (hovering) {
        return 'list-item grey lighten-4'
      } else {
        return 'list-item'
      }
    },

    materialListItemClasses(id, hovering) {
      if (id === this.selectedMaterialID) {
        return 'list-item primary'
      } else if (hovering) {
        return 'list-item grey lighten-4'
      } else {
        return 'list-item'
      }
    },

    reorderModel(fromIndex, toIndex) {
      let models = this.selectedModels
      arrayMove.mutate(models, fromIndex, toIndex)
      let pages = paginateModels(models)
      this.setSectionPages({ section: this.selectedSection, pages: pages })
    },

    reorderMaterial(fromIndex, toIndex) {
      let mats = this.selectedMaterials
      arrayMove.mutate(mats, fromIndex, toIndex)
      this.setModelMaterials({ model: this.selectedModel, materials: mats })
    },

    popSectionInfo(id) {
      this.selectSection(id)
      this.showSectionInfoDialog = true
    },

    popSectionDelete(id) {
      this.selectSection(id)
      this.showSectionDeleteDialog = true
    },

    popModelInfo(id) {
      this.selectModel(id)
      this.showModelInfoDialog = true
    },

    popModelDelete(id) {
      this.selectModel(id)
      this.showModelDeleteDialog = true
    },

    ...mapActions([
      'selectSection',
      'selectModel',
      'selectMaterial',
      'reorderSection',
      'setSectionPages',
      'setModelMaterials',
      'moveModelToSection',
      'moveMaterialToSection',
    ]),
  },
  mounted: function() {
    let me = this

    // reordering of sections
    Sortable.create(document.getElementById('sections'), {
      group: {
        name: 'sections',
      },
      animation: 150,
      onEnd: function(evt) {
        me.reorderSection({ from: evt.oldIndex, to: evt.newIndex })
      },
    })

    // reordering of models
    Sortable.create(document.getElementById('models'), {
      group: {
        name: 'models',
      },
      animation: 150,
      onStart: function(evt) {
        addSectionDrops(me)
      },
      onEnd: function(evt) {
        if (evt.from === evt.to) {
          me.reorderModel(evt.oldIndex, evt.newIndex)
        } else {
          // dropped on a section.
          let models = me.selectedModels
          let model = models[evt.oldIndex]

          let sectionID = Number(evt.to.getAttribute('section-id'))
          let newSection = me.section(sectionID)

          if (me.selectedSection.id !== newSection.id) {
            me.moveModelToSection({ model: model,
                                    oldSection: me.selectedSection,
                                    newSection: newSection })
          } else {
            console.log('not moving to same section')
          }
        }
      },
    })

    // reordering of materials
    Sortable.create(document.getElementById('materials'), {
      group: {
        name: 'materials',
      },
      animation: 150,
      onStart: function(evt) {
        addSectionDrops(me)
      },
      onEnd: function(evt) {
        if (evt.from === evt.to) {
          me.reorderMaterial(evt.oldIndex, evt.newIndex)
        } else {
          // dropped on a section.
          let mats = me.selectedMaterials
          let mat = mats[evt.oldIndex]

          let sectionID = Number(evt.to.getAttribute('section-id'))
          let newSection = me.section(sectionID)

          if (me.selectedSection.id !== newSection.id) {
            me.moveMaterialToSection({ material: mat,
                                       oldModel: me.selectedModel,
                                       newSection: newSection })
          } else {
            console.log('not moving to same section')
          }
        }
      },
    })
  },
}

function addSectionDrops(myvue) {
  // make sure our section drop targets are set up
  // after catalog load or section add

  // drop model or material into a section
  var drops = document.getElementsByClassName('section-drop')
  for (var i = 0; i < drops.length; ++i) {
    if (!drops[i].getAttribute('drop-ready')) {
      drops[i].setAttribute('drop-ready', true)

      Sortable.create(drops[i], {
        group: {
          name: 'section-drops',
          pull: false,
          put: function(to, from) {
            // don't allow drop on section where it already lives
            let oldSectionID = myvue.selectedSection.id
            let newSectionID = to.el.getAttribute('section-id')
            if (Number(oldSectionID) === Number(newSectionID)) {
              return false
            }

            // allow drop from anything but another section
            return from.options.group.name !== 'sections'
          },
        },
        animation: 150,
        // (actual drop is handled in the originating list)
      })
    }
  }
}
</script>

<style>
.selected {
  background-color: purple;
}

.sortable-chosen {
  color: black;
  background-color: #fddd04;
}

.sortable-ghost {
  background-color: #bababa;
}

.section-parent {
  position: relative;
}

.section-drop {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
}

.list-item {
  background-color: white;
  border-bottom: 1px solid #ddd;
}

.list-group {
  background-color: #f0f0ff;
  min-height: 200px;
}
</style>
