// 功能插件
import log from '../../utils/log'
import Vue from 'vue'
const EVENTS = {
  CLICK: 'on-node-click',
  DBLCLICK: 'on-node-dblclick',
  CONTEXTMENU: 'on-node-contextmenu',
  MOUSEENTER: 'on-node-mouseenter',
  MOUSELEAVE: 'on-node-mouseleave'
}

function createListener (handler, data) {
  if (typeof handler === 'function') {
    return function (e) {
      if (e.target.className.indexOf('org-tree-node-btn') > -1) return

      handler.apply(null, [e, data])
    }
  }
}
// 判断是否叶子节点
const isLeaf = (data, prop, lazy) => {
  const children = data[prop]
  const hasChild = Array.isArray(children) && children.length > 0
  const isEmpty = lazy && Array.isArray(children) && children.length === 0
  return (!hasChild && !lazy) || data.isLeaf || isEmpty
}

// 创建 node 节点
export const renderNode = (h, data, context, root) => {
  const { props } = context;
  const cls = ['tree-org-node']
  const childNodes = []
  const children = data[props.props.children]
  const expandKey = props.props.expand
  if(data[expandKey]===undefined && data.$$level < props.defaultExpandLevel) {
    Vue.prototype.$set(data, expandKey, true)
  }
  const isExpand = data[expandKey]
  // 如果是叶子节点则追加leaf事件
  if (isLeaf(data, props.props.children, props.lazy)) {
    cls.push('is-leaf')
  } else if (props.collapsable && !isExpand) { // 追加是否展开class
    cls.push('collapsed')
  }
  if(data.moving) {
    cls.push('tree-org-node__moving')
  }
  // 渲染label块
  childNodes.push(renderLabel(h, data, context, root))

  if (!props.collapsable || isExpand) {
    childNodes.push(renderChildren(h, children, context, data.$$level))
  }
  return h('div', {
    'class': cls,
    'key': data[props.props.id],
    'directives' :[ {
      name: 'show',
      value: !data.hidden
    }]
  }, childNodes)
}

// 创建展开折叠按钮
export const renderBtn = (h, data, context) => {
  const { props, listeners } = context;
  const expandHandler = listeners['on-expand']

  let cls = ['tree-org-node__expand']

  if (data[props.props.expand]) {
    cls.push('expanded')
  }
  const children = []
  if (context.scopedSlots.expand) {
    children.push(context.scopedSlots.expand({node: data}))
  } else {
    children.push(h('span', {'class': 'tree-org-node__expand-btn'}))
  }
  return h('span', {
    'class': cls,
    on: {
      mousedown: (e) => { e.stopPropagation(); },
      dblclick: (e) => { e.stopPropagation(); },
      click: e => { e.stopPropagation(); expandHandler && expandHandler(e, data)}
    }
  }, children)
}

// 创建 label 节点
export const renderLabel = (h, data, context, root) => {
  const { props, listeners } = context
  const label = data[props.props.label]
  const renderContent = props.renderContent
  const { directives } = context.data;

  const childNodes = []
  if (context.scopedSlots.default) {
    childNodes.push(context.scopedSlots.default({node: data}))
  } else if (typeof renderContent === 'function') {
    log.warning('scoped-slot header is easier to use. We recommend users to use scoped-slot header.');
    let vnode = renderContent(h, data)
    vnode && childNodes.push(vnode)
  } else {
    childNodes.push(h('div', {
      class: 'tree-org-node__text'
    }, label))
  }

  if (props.collapsable && !isLeaf(data, props.props.children, props.lazy)) {
    childNodes.push(renderBtn(h, data, context))
  }

  const cls = ['tree-org-node__inner']
  let { labelStyle, labelClassName, selectedClassName, selectedKey } = props

  if (typeof labelClassName === 'function') {
    labelClassName = labelClassName(data)
  }

  labelClassName && cls.push(labelClassName)
  data.className && cls.push(data.className)
  // add selected class and key from props
  if (typeof selectedClassName === 'function') {
    selectedClassName = selectedClassName(data)
  }

  selectedClassName && selectedKey && data[selectedKey] && cls.push(selectedClassName)
  const nodeLabelClass = ['tree-org-node__content'];
  if (root) {
    nodeLabelClass.push(`is-root_${props.suffix}`)
  }
  if (!data[props.props.label]) {
    nodeLabelClass.push('is-empty')
  }
  if (data.focused) {
    nodeLabelClass.push('is-edit')
  }
  // directives
  let cloneDirs
  if(Array.isArray(directives)){
    cloneDirs = directives.map(item=>{
      const newValue = Object.assign({node: data}, item.value)
      return Object.assign({...item}, {value: newValue})
    })
  }
  // event handlers
  const NODEEVENTS = {};
  for (let EKEY in EVENTS){
    if (Object.prototype.hasOwnProperty.call(EVENTS,EKEY)){
      const EVENT = EVENTS[EKEY];
      let handler = listeners[EVENT];
      if(handler){
        NODEEVENTS[EKEY.toLowerCase()] = createListener(handler, data);
      }
    }
  }
  // texterea event handles
  const focusHandler = listeners['on-node-focus']
  const blurHandler = listeners['on-node-blur']
  return h('div', {
    'class': nodeLabelClass,
  }, [h('div', {
    'class': cls,
    'directives': root? [] : cloneDirs,
    style: data['style'] ? data['style'] : labelStyle,
    on: NODEEVENTS,
  },childNodes), h('textarea', {
    'class': "tree-org-node__textarea",
    'directives' :[{
      name: 'show',
      value: data.focused
    }, {
      name: 'focus',
      value: data.focused
    }],
    "domProps":{
      placeholder: "请输入节点名称",
      value: data[props.props.label],
    },
    on: {
      focus: e => focusHandler && focusHandler(e, data),
      input: e => { data[props.props.label] = e.target.value },
      blur: e => { data.focused = false; blurHandler && blurHandler(e, data)},
      click: e => e.stopPropagation()
    }
  })])
}

// 创建 node 子节点
export const renderChildren = (h, list, context, level) => {
  if (Array.isArray(list) && list.length) {
    const children = list.filter(item => !item.hidden).map(item => {
      item.$$level = level + 1
      return renderNode(h, item, context, false)
    })

    return h('div', {
      'class': 'tree-org-node__children'
    }, children)
  }
  return ''
}

export const render = (h, context) => {
  const { props } = context
  props.data.root = props.isClone ? false : true;
  props.data.$$level = 0
  return renderNode(h, props.data, context, true)
}

export default render