<template>
  <f7-treeview-item selectable :label="(model.item.created === false) ? '(New Item)' : (model.item.label || model.item.name)"
                    :icon-ios="icon('ios')" :icon-aurora="icon('aurora')" :icon-md="icon('md')"
                    :textColor="iconColor" :color="(model.item.created !== false) ? 'blue' :'orange'"
                    :selected="selected && selected.item.name === model.item.name"
                    :opened="model.opened"
                    @click="select">
    <model-treeview-item v-for="node in [model.children.locations,
                                         model.children.equipment, model.children.points,
                                         model.children.groups, model.children.items].flat()"
                         :key="node.item.name"
                         :model="node"
                         @selected="(event) => $emit('selected', event)"
                         :selected="selected"
                         @checked="(item, check) => $emit('checked', item, check)" />
    <div slot="label" class="semantic-class">
      {{ className() }}
    </div>
    <f7-checkbox slot="content-start" v-if="model.checkable"
                 :checked="model.checked === true" :disabled="model.disabled" @change="check" />
  </f7-treeview-item>
</template>

<script>
export default {
  props: ['model', 'selected'],
  computed: {
    children () {
      return [this.model.children.locations,
        this.model.children.equipment, this.model.children.points,
        this.model.children.groups, this.model.children.items].flat()
    },
    iconColor () {
      return (this.model.item.metadata && this.model.item.metadata.semantics) ? '' : 'gray'
    }
  },
  methods: {
    icon (theme) {
      if (this.model.class.indexOf('Location') === 0) {
        return (theme === 'md') ? 'material:place' : 'f7:placemark'
      } else if (this.model.class.indexOf('Equipment') === 0) {
        return (theme === 'md') ? 'material:payments' : 'f7:cube_box'
      } else if (this.model.class.indexOf('Point') === 0) {
        return (theme === 'md') ? 'material:flash_on' : 'f7:bolt_fill'
      } else if (this.model.item.type === 'Group') {
        return (theme === 'md') ? 'material:folder' : 'f7:folder'
      } else {
        return 'material:label_outline'
      }
    },
    className () {
      if (!this.model.item.metadata || !this.model.item.metadata.semantics) return
      const semantics = this.model.item.metadata.semantics
      const property = (semantics.config && semantics.config.relatesTo)
        ? semantics.config.relatesTo : null
      return this.model.class.substring(this.model.class.lastIndexOf('_') + 1) +
        ((property) ? ' (' + property.replace('Property_', '') + ')' : '')
    },
    select (event) {
      let self = this
      let $ = self.$$
      if ($(event.target).is('.treeview-toggle')) return
      if ($(event.target).is('.checkbox') || $(event.target).is('.icon-checkbox') || $(event.target).is('input')) return
      this.$emit('selected', this.model)
      if (this.model.checkable && !this.children.length) this.check({ target: { checked: !this.model.checked } })
    },
    check (event) {
      if (this.model.disabled) return
      this.model.checked = event.target.checked
      this.$emit('checked', this.model, event.target.checked)
    }
  }
}
</script>
