<template lang='pug'>
  div
    div()
      v-container
       v-card
        v-card-title Registered
        v-card-text
          h3 Group
            rgvRecursiveListGroup(:list='groupList' :options='options' :localList='local' :mapData='customMap' :mapAlias='customAlias' :saveOnSubmit='saveAll' :onClick='open' :onChange='changed')
    hr
    v-checkbox(v-model='autoUpdate' label='Auto-update' @change='setAutoupdate')
    v-checkbox(v-model='showLive' label='Live')
    h6 List: {{groupList}}
    h6 Local: {{local}}
    h6 Edits: {{edits}}
    
    v-dialog(v-model='testDialog' max-width='500px')
      v-card
        v-card-text
          h5 Open dialog for this element...
          h6 {{element}} 
</template>

<script>
import {rgvRecursiveListGroup} from './recursive-list.js'
import CodeUsage from '@/../packages/code-usage/lib/CodeUsage.vue'

export default {
  components: {
    CodeUsage,
    rgvRecursiveListGroup
  },
  data () {
    return {
      groupList: [],
      local: [],
      testDialog: false,
      element: {},
      options: {
        selectable: true,
        annotations: { "5": 'custom note' },
        icons: {
          Fruit: 'home',
          Vegetable: 'edit'
        }
      },
      list: [],
      edits: {},
      autoUpdate: false,
      showLive: false
    }
  },
  async created () {
    this.groupList = [
        {id: 1, name: 'Fruit', parent_id: null},
        {id: 2, name: 'Apple', parent_id: 1},
        {id: 3, name: 'Grape', parent_id: 1},
        {id: 4, name: 'Granny Smith', parent_id: 2},
        {id: 5, name: 'MacIntosh', parent_id: 2},
        {id: 6, name: 'Red Delicious', parent_id: 2},
        {id: 7, name: 'Red', parent_id: 3},
        {id: 8, name: 'White', parent_id: 3},
        {id: 9, name: 'Vegetable', parent_id: null},
        {id: 10, name: 'Potato', parent_id: 9},
        {id: 11, name: 'Yam', parent_id: 10},
        {id: 12, name: 'Sweet Potato', parent_id: 10},
        {id: 13, name: 'Russet', parent_id: 10},
        {id: 14, name: 'Brussel Sprouts', parent_id: 9},
        {id: 15, name: 'Peas', parent_id: 9}
    ]

    this.local = [
        {id: 7, name: 'Red', parent_id: 3},
        {id: 8, name: 'White', parent_id: 3},
        {id: 5, name: 'MacIntosh', parent_id: 2, favourite: true},
        {id: 10, name: 'Potato', parent_id: 9},
        {id: 11, name: 'Yam', parent_id: 10}
    ]

  },
  computed: {
  },
  methods: {
    setAutoupdate: function () {
      this.options.autoupdate = this.autoUpdate
    },
    // saveChange: function (item, action) {
    //   if (action === 'add') {
    //     this.local.push(item)
    //   } else {
    //     this.local = this.local.filter(a => (a.id !== item.id))
    //   }
    // },
    saveAll: function (list, edits) {
      console.log('saved changes')
      console.log("List: " + JSON.stringify(list))
      console.log("Edits: " + JSON.stringify(edits))
      this.$set(this, 'list', list)
      this.$set(this, 'local', list)
    },
    saveChange: function (list, edits) {
      console.log('saved change')
      console.log("List: " + JSON.stringify(list))
      console.log("Edits: " + JSON.stringify(edits))
      // this.$set(this, 'list', list)
      // this.$set(this, 'local', list)      
    },
    changed: function (list, edits) {
      console.log('changed ...')
      console.log("List: " + JSON.stringify(list))
      console.log("Edits: " + JSON.stringify(edits))

      // this.$set(this, 'edits', edits)
      // this.$set(this, 'list', list)
      // this.$set(this.options.annotations, this.list.length, 'annot here for ' + this.list.length)
      // console.log("annotate " + this.groupList[this.list.length - 1].name)
    },
    customMap: function (obj) {
        if (obj.favourite) {
            obj.name = obj.name + '*'
        }
        return obj
    },
    open: function (element) {
      this.testDialog = true
      this.element = element
    },
    mapSkills: function (obj) {
      if (obj.skill_id) {
        return {
          interest_id: obj.id, 
          skill: obj.skill, 
          level: obj.skill_level, 
          id: obj.skill_id
        }
      } else {
          return {}
      }
    },
    customAlias: function (object) {
      if (object.name.match(/i/)) {
        return 'custom name for ' + object.name 
      } else {
        return 'alias for ' + object.name
      }
    }
  }
}
</script>
<style scoped>
.centred {
  text-align: center
}
.left {
  text-align: left
}
</style>
