<template lang='pug'>
  div
    h2 rgvRecursiveList
    hr
    h4 Usage:
    p rgvRecursiveList(:list='list')
    p rgvRecursiveList(:list='list' :content='content')
    hr
    v-container
          p &nbsp;
          div(v-for='example in examples')
            v-card(width='80%') 
              v-card-title {{example.name}}
              v-card-text.left
                CodeUsage(:title='example.name' :input='example.input.options')
                hr
                v-layout(row wrap)
                  v-flex(lg6)
                   v-container
                    v-card
                     v-card-title Registered 
                        rgvRecursiveList(:list='example.input.list' :options='example.input.options' :onSelect='selectMe' :onClick='clickMe' :onSecondarySelect='anotherSelectMe' :showSelectFunction='selectMe')
                        rgvTimer()
                  v-flex(lg6)
                   v-container
                    v-card
                     v-card-title Live 
                        live-recursive-list(:list='example.input.list' :options='example.input.options' :onSelect='selectMe' :onClick='clickMe' :onSecondarySelect='anotherSelectMe' :showSelectFunction='selectMe')

    v-dialog(v-model='showItem')
        v-card 
          v-card-text
            h3 Item:
            b {{show}}
        p &nbsp;
    v-dialog(v-model='testDialog')
      v-card(max-width='600px')
        v-card-text
          h5 Open dialog for this element...
          h6 {{element}} 
</template>

<script>
import axios from 'axios'

import {rgvRecursiveList} from './recursive-list.js'
import {rgvTimer} from '@/../packages/timer/lib/timer.js'
import {liveRecursiveList} from './recursive-list.test.js'

import CodeUsage from '@/../packages/code-usage/lib/CodeUsage.vue'

const testList = [
  {id: 1, name: 'Earth', parent_id: null},
  {id: 2, name: 'Asia', parent_id: 1},
  {id: 3, name: 'Europe', parent_id: 1},
  {id: 3, name: 'Europe', parent_id: 1},
  {id: 4, name: 'North America', parent_id: 1},
  {id: 5, name: 'South America', parent_id: 1},
  {id: 21, name: 'China', parent_id: 2},
  {id: 22, name: 'India', parent_id: 2},
  {id: 23, name: 'Japan', parent_id: 2},
  {id: 31, name: 'Germany', parent_id: 3},
  {id: 32, name: 'France', parent_id: 3},
  {id: 41, name: 'Canada', parent_id: 4},
  {id: 42, name: 'USA', parent_id: 4},
  {id: 101, name: 'Ontario', parent_id: 41},
  {id: 101, name: 'Ontario', parent_id: 41},
  {id: 102, name: 'BC', parent_id: 41},
  {id: 103, name: 'Quebec', parent_id: 41},
  {id: 111, name: 'Toronto', parent_id: 101},
  {id: 112, name: 'Ottawa', parent_id: 101},
  {id: 113, name: 'Sudbury', parent_id: 101}
]
export default {
  components: {
    CodeUsage,
    rgvRecursiveList,
    liveRecursiveList,
    rgvTimer
  },
  data () {
    return {
      show: 'default',
      showItem: false,
      examples: [
        {
          name: 'non selectable',
          input: {
            list: testList,
            options: {
              selectable: false
            }
          },
        },
        {
          name: 'select single item',
          input: {
            list: testList,
            options: {
              multiple: false,
              selectable: true
            }
          },
        },
        {
          name: 'selectable',
          input: {
            list: testList,
            options: {
              selectable: true,
              autosave: true
            }
          },
        },
      ],
      groupList: [],
      personal: [],
      testDialog: false,
      element: {}
    }
  },
  async created () {
    this.examples[0].input.options.onClick = this.clickMe
    this.examples[2].input.options.onClick = this.clickMe

      // suffix = suffix + '/progeny/' + options.scope

    // this.loadSparc()
  },
  async loadSparc () {
    try {
      var url = 'https://sparc.idvpn.ca/interests'
      console.log('call ' + url)
      await axios.get(url)
        .then (response => {
          this.groupList = response.data.interests
          console.log("List Retrieved: " + JSON.stringify(this.groupList))
        })
        .catch (err => {
          console.log('Error: ' + err.message)
        })

      url = 'https://sparc.idvpn.ca/users/4/interests'
      console.log('call ' + url)
      await axios.get(url)
        .then (response => {
          this.personal = response.data.interests
          console.log("Personal List Retrieved: " + JSON.stringify(this.groupList))
        })
        .catch (err => {
          console.log('Error: ' + err.message)
        })
    } catch (err) {
      console.log('failed to call axios ' + err.message)
    }
  },
  computed: {
  },
  methods: {
    customMap: function () {
      return {
        skills: this.mapSkills
      }
    },
    open: function (element) {
      console.log('open dialog box')
      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.skill_level) {
        return object.name + ' [' + object.skill_level + ']'
      } else {
        return object.name
      }
    },
    selectMe: function (form) {
      console.log('pickme ' + JSON.stringify(form))
      this.$myConsole.log('function supplied for pick me' + JSON.stringify(form))
      this.show = JSON.stringify(form)
    },
    clickMe: function (item) {
      console.log("PICK " + JSON.stringify(item))
      this.show = JSON.stringify(item)
      this.showItem=true
    },
    anotherSelectMe: function (item) {
      console.log("Click on another function for  " + JSON.stringify(item))
      this.show = JSON.stringify(item)
      this.showItem=true
    },
    anotherSelectTest: function (item) {
      console.log*('decide on visibility of secondary link based upon ' + JSON.stringify(item))
      // enable visible / invisible secondary clickable link ..
      return true
    }

  }
}
</script>
<style scoped>
.centred {
  text-align: center
}
.left {
  text-align: left
}
</style>
