<template>
  <nav :class="[componentClass]" tabindex=0>
    <ul>
      <li v-for="(row0, index0) in getChildren(0, null)" :key="index0" 
        :class="[
          'level-0-item',
          {'c-has-children':hasChildren(1, getChildValue(row0)) && hasValueSlot($scopedSlots, 'slotName1')},
          row0.isExpanded && 'c-expanded'
        ]"
        v-on:click.stop="(expandTrigger == 'click' && hasChildren(1, getChildValue(row0))) && expandNodeOnClick(row0)"
        v-on:mouseenter="(expandTrigger == 'hover' && hasChildren(1, getChildValue(row0))) && expandNodeOnMouseEnter(row0)"
        v-on:mouseleave="(expandTrigger == 'hover' && hasChildren(1, getChildValue(row0))) && collapseNodeOnMouseLeave(row0)"
      >
        <slot name="slotName0" v-bind:row="row0" v-bind:itemInfo="{hasChildren:hasChildren(1, getChildValue(row0))}"></slot>
        <div class="level-1" v-if="hasValueSlot($scopedSlots, 'slotName1') && hasChildren(1, getChildValue(row0))">
          <ul v-for="(col1, indexcol1) in getColumns(1, getChildValue(row0))" :key="indexcol1" class="level-1-items">
            <li v-for="(row1, index1) in getChildren4Colum(1, getChildValue(row0), indexcol1)" :key="index1"
              :class="[
                'level-1-item',
                {'has-children':hasChildren(2, getChildValue(row1)) && hasValueSlot($scopedSlots, 'slotName2')},
                row1.isExpanded && 'c-expanded'
              ]"
              v-on:click.stop="(expandTrigger == 'click' && hasChildren(2, getChildValue(row1))) && expandNodeOnClick(row1)"
              v-on:mouseenter="(expandTrigger == 'hover' && hasChildren(2, getChildValue(row1))) && expandNodeOnMouseEnter(row1)"
              v-on:mouseleave="(expandTrigger == 'hover' && hasChildren(2, getChildValue(row1))) && collapseNodeOnMouseLeave(row1)"
            >
              <slot name="slotName1" v-bind:row="row1" v-bind:itemInfo="{hasChildren:hasChildren(2, getChildValue(row1))}"></slot>
              <div class="level-2" v-if="hasValueSlot($scopedSlots, 'slotName2')">
                <div v-for="(row2, index2) in getChildren(2, getChildValue(row1))" :key="index2" v-bind:class="[getMenuSubClass(2)]"
                  v-on:click.stop="(expandTrigger == 'click')"
                >
                  <slot name="slotName2" v-bind:row="row2"></slot>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </nav>
</template>
<script>

import base from './c-base'
import stringUtils from '../classes/stringUtils'

const props = {
  dataFieldIdent4Parent: {
    type: String,
    default:null
  },
  dataFieldIdent4Child: {
    type: String,
    default:null
  },
  dataFieldIdent4Level: {
    type: String,
    default:null
  },
  dataFieldIdent4IsExpanded: {
    type: String,
    default:null
  },
  columnsCount: {
    type: Number,
    default: 4
  },
  expandTrigger: {
    type: String,
    default: "hover" //hover, click
  },
  expandMode: {
    type: String,
    default: "one" //one, many
  }
}
export default {
  extends: base,
  data: function () {
    return {
      componentClass: 'c-menu'
    }
  },
  props,
  methods: {
    getMenuSubClass: function (level) {
      return this.componentClass + '--item--' + level
    },
    getParentValue: function (item) {
      return item[this.dataFieldIdent4Parent]
    },
    getChildValue: function (item) {
      return item[this.dataFieldIdent4Child]
    },
    getLevelValue: function (item) {
      return item[this.dataFieldIdent4Level]
    },
    getChildren: function (level, parentId) {
      return this.rows.filter(item => this.getLevelValue(item) === level && (this.getParentValue(item) === parentId || parentId === null))
    },
    hasChildren: function (level, parentId) {
      let children = this.getChildren(level, parentId)
      return children && children.length > 0 ? true : false
    },
    getColumns: function(level, parentId) {
      return this.getChildren(level, parentId).length > 0 ? this.columnsCount : 0
    },
    getChildren4Colum: function(level, parentId, columnNo) {
      var children = this.getChildren(level, parentId)
      var childrenCount4Column = Math.ceil(children.length / this.columnsCount)
      return children.slice((columnNo * childrenCount4Column), ((columnNo * childrenCount4Column) + (childrenCount4Column)))
    },
    hasValueSlot: function (scopedSlots, name) {
      return scopedSlots[name] ? true : false
    },
    expandNodeOnClick: function(row) {
      if(!stringUtils.isEmpty(this.dataFieldIdent4IsExpanded)) {
        let isExpanded = this.getDataSetFieldValue(this.sourceKind, this.dataSet, this.dataFieldIdent4IsExpanded, row, null)
        isExpanded = Number(!isExpanded)

        if(this.expandMode == "one" && isExpanded == 1) {
          this.getChildren(this.getDataSetFieldValue(this.sourceKind, this.dataSet, this.dataFieldIdent4Level, row, null), null).forEach((item) => {
            if((item != row) && (this.getDataSetFieldValue(this.sourceKind, this.dataSet, this.dataFieldIdent4IsExpanded, item, null) == 1)) {
              this.setDataSetFieldValue({
                sourceKind: this.sourceKind,
                appWindowIdent: this.appWindowIdent, 
                dataSet: this.dataSet,
                row: item,
                dataFieldIdent: this.dataFieldIdent4IsExpanded,
                dataFieldValue: 0 
              })
            }
          })
        }

        this.setDataSetFieldValue({
          sourceKind: this.sourceKind,
          appWindowIdent: this.appWindowIdent, 
          dataSet: this.dataSet,
          row: row,
          dataFieldIdent: this.dataFieldIdent4IsExpanded,
          dataFieldValue: isExpanded 
        })
      }
    },
    expandNodeOnMouseEnter: function(row) {
      if(!stringUtils.isEmpty(this.dataFieldIdent4IsExpanded)) {
        this.setDataSetFieldValue({
          sourceKind: this.sourceKind,
          appWindowIdent: this.appWindowIdent, 
          dataSet: this.dataSet,
          row: row,
          dataFieldIdent: this.dataFieldIdent4IsExpanded,
          dataFieldValue: 1 
        })
      }
    },
    collapseNodeOnMouseLeave: function(row) {
      if(!stringUtils.isEmpty(this.dataFieldIdent4IsExpanded)) {
        this.setDataSetFieldValue({
          sourceKind: this.sourceKind,
          appWindowIdent: this.appWindowIdent, 
          dataSet: this.dataSet,
          row: row,
          dataFieldIdent: this.dataFieldIdent4IsExpanded,
          dataFieldValue: 0 
        })
      }
    }
  }
}</script>