var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

// require PrototypeArray.js
import React, { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
import Instance from './instance.js';

var MenuTree = forwardRef(function (_ref, ref) {
  var _ref$selected = _ref.selected,
      selected = _ref$selected === undefined ? [] : _ref$selected,
      _ref$list = _ref.list,
      list = _ref$list === undefined ? [] : _ref$list,
      onChange = _ref.onChange,
      onExtendActive = _ref.onExtendActive,
      onClick = _ref.onClick,
      onClickLeaf = _ref.onClickLeaf,
      others = _objectWithoutProperties(_ref, ['selected', 'list', 'onChange', 'onExtendActive', 'onClick', 'onClickLeaf']);

  var refEl = useRef(null);
  useImperativeHandle(ref, function () {
    return refEl.current;
  });
  var instance = useRef(null);

  useEffect(function () {
    if (!instance.current) return;
    if (list && list.length) {
      if (selected && selected.length) {
        instance.current.setSelectedId(selected[0].id);
      }
      var data = Object.clone(list);
      if (JSON.stringify(data).indexOf('"children"') === -1) {
        data = data.deepTree();
      }
      instance.current.setData(data);
    } else {
      instance.current.setData([]);
    }
  }, [list]);

  useEffect(function () {
    if (instance.current) return;
    var data = Object.clone(list);
    if (JSON.stringify(data).indexOf('"children"') === -1) {
      data = data.deepTree();
    }
    instance.current = new Instance(refEl.current, {
      data: data,
      selectedId: selected && selected.length ? selected[0].id : '',
      onExtendActive: onExtendActive ? true : null,
      onClick: click // (item, isActive, isExtend: true展开 | false收缩)
    });
  }, []);

  // 更新句柄, 防止synchronization模式, 每次组件在render的时候都生成上次render的state、function、effects
  if (instance.current) {
    instance.current.params.onClick = click;
  }
  function click(s, item, isActived, isExtend) {
    if (refEl.current) s.target = refEl.current;
    // childrenCount
    var childrenCount = item.children && item.children.length ? item.children.length : 0;

    // 点击回调
    if (onClick) onClick(s, item.name, [item], isActived, isExtend, childrenCount);
    if (!isActived) {
      // 选中菜单变化
      if (onChange) onChange(s, item.name, [item]);
    } else if (!isExtend) {
      // 选中菜单展开
      if (onExtendActive) onExtendActive(s, item.name, [item]);
    }
    if (item.isLeaf === true && onClickLeaf) onClickLeaf(s, item.name, item, isActived, isExtend, childrenCount);
  }

  return React.createElement('ul', _extends({ ref: refEl }, others, { className: 'menutree' + (others.className ? ' ' + others.className : '') }));
});

export default MenuTree;