import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";

/**
 * parallelMenu.jsx
 *
 * @Author: zhangce
 * @Date: 17/12/29 下午5:13
 */
import React, { Children, isValidElement, cloneElement } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Menu from './Menu';
import MenuItem from './MenuItem';
import SubMenu from './SubMenu';
import Rolling from '../icons/internals/Rolling';
import { isEqualArrays } from '../util/isEqual';
import { arrayTreeFilter } from '../util/arrayTreeFilter';
/**
 * ParallelMenu
 * @description 用于级联组件
 */

var ParallelMenu =
/*#__PURE__*/
function (_React$PureComponent) {
  _inherits(ParallelMenu, _React$PureComponent);

  function ParallelMenu(props) {
    var _this;

    _classCallCheck(this, ParallelMenu);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(ParallelMenu).call(this, props));

    _defineProperty(_assertThisInitialized(_this), "isSubMenu", function (ele) {
      return ele.type.isSubMenu;
    });

    _defineProperty(_assertThisInitialized(_this), "isMenuItem", function (ele) {
      return ele.type.isMenuItem;
    });

    _defineProperty(_assertThisInitialized(_this), "getNewValue", function (i, val, array) {
      var newArr = array.slice(0);
      newArr[i] = val;
      return newArr.slice(0, i + 1);
    });

    _defineProperty(_assertThisInitialized(_this), "onChange", function (i) {
      return function (e, val) {
        var _this$props = _this.props,
            onChange = _this$props.onChange,
            changeOnSelect = _this$props.changeOnSelect,
            defaultValue = _this$props.defaultValue;
        var isLast = _this.isLast;
        _this.currentValue = _this.getNewValue(i, val, _this.currentValue);

        if (!changeOnSelect && isLast && !isEqualArrays(_this.currentValue, defaultValue)) {
          onChange && onChange(_this.currentValue, _this.isLast);
        }
      };
    });

    _defineProperty(_assertThisInitialized(_this), "onSelect", function (i) {
      return function (e, val) {
        var value = _this.state.value;
        var _this$props2 = _this.props,
            onSelect = _this$props2.onSelect,
            onChange = _this$props2.onChange,
            changeOnSelect = _this$props2.changeOnSelect,
            defaultValue = _this$props2.defaultValue;
        var isLast = _this.isLast;

        var newValue = _this.getNewValue(i, val, value);

        onSelect && onSelect(e, val, isLast, i, newValue);

        _this.setState({
          value: newValue
        });

        if (changeOnSelect && !isEqualArrays(newValue, defaultValue)) {
          _this.currentValue = _toConsumableArray(newValue);
          onChange && onChange(_this.currentValue, _this.isLast);
        }
      };
    });

    _defineProperty(_assertThisInitialized(_this), "getValidChildren", function (children) {
      var result;

      if (Array.isArray(children)) {
        result = children.filter(function (o) {
          return _this.isSubMenu(o) || _this.isMenuItem(o);
        });
      } else if (isValidElement(children) && (_this.isSubMenu(children) || _this.isMenuItem(children))) {
        result = [children];
      } else {
        result = [];
      }

      return result;
    });

    _defineProperty(_assertThisInitialized(_this), "renderChildren", function (children) {
      var _this$props3 = _this.props,
          childrenKeyName = _this$props3.childrenKeyName,
          prefixCls = _this$props3.prefixCls;
      return children.map(function (ele, i) {
        if (ele[childrenKeyName]) {
          return React.createElement(SubMenu, {
            key: i,
            mode: "parallel",
            value: ele.value,
            title: ele.label,
            disabled: ele.disabled
          }, ele[childrenKeyName] && _this.renderChildren(ele[childrenKeyName]));
        }

        return React.createElement(MenuItem, {
          key: i,
          value: ele.value,
          disabled: ele.disabled,
          suffix: ele.loading && (ele.loadingIcon || React.createElement(Rolling, {
            className: "".concat(prefixCls, "-loading"),
            spin: true
          }))
        }, ele.label);
      });
    });

    _defineProperty(_assertThisInitialized(_this), "renderSubMenuItems", function (ele) {
      var menu;

      if (Array.isArray(ele) && ele.length) {
        menu = _this.getMenuItems(ele);
      } else if (isValidElement(ele)) {
        menu = _this.getMenuItems([ele]);
      } else {
        menu = React.createElement(MenuItem, {
          disabled: true
        }, "\u6682\u65E0\u6570\u636E");
      }

      return menu;
    });

    _this.currentValue = _toConsumableArray(props.defaultValue);
    _this.state = {
      value: props.defaultValue
    };
    return _this;
  }

  _createClass(ParallelMenu, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(newProps) {
      if (newProps.defaultValue !== this.props.defaultValue) {
        this.setState({
          value: newProps.defaultValue
        });
        this.currentValue = _toConsumableArray(newProps.defaultValue);
      }
    } // 判断元素为subMenu

  }, {
    key: "getMenuItems",
    // 为menu的每项item添加onClick 判断当前点击元素是否为最后一级
    value: function getMenuItems(children) {
      var _this2 = this;

      var items = [];
      Children.forEach(children, function (item) {
        if (isValidElement(item)) {
          items.push(cloneElement(item, {
            onClick: function onClick() {
              return _this2.isLast = !_this2.isSubMenu(item);
            }
          }));
        }
      });
      return items;
    } // 获取有效的子组件SubMenu/MenuItem

  }, {
    key: "getActiveMenuItems",
    // 获取选中项
    value: function getActiveMenuItems(values) {
      var _this3 = this;

      var childrenKeyName = this.props.childrenKeyName;
      var value = this.state.value;
      value = values || value;
      var option = this.childrenEle;
      return arrayTreeFilter(option, function (o, level) {
        return o.props.value === value[level];
      }, function (obj) {
        return _this3.getValidChildren(obj.props[childrenKeyName]);
      }, {
        childrenKeyName: childrenKeyName
      });
    } // options递归转换为树形结构组件

  }, {
    key: "getShowMenus",
    // 渲染的menus
    value: function getShowMenus() {
      var _this4 = this;

      var _this$props4 = this.props,
          children = _this$props4.children,
          options = _this$props4.options;
      this.childrenEle = options ? this.renderChildren(options) : children;
      var result = this.getActiveMenuItems().map(function (activeOption) {
        return _this4.getValidChildren(activeOption.props.children).length && activeOption.props.children;
      }).filter(function (activeOption) {
        return !!activeOption;
      });
      result.unshift(this.childrenEle);
      return result;
    } // 渲染menu 绑定onClick事件 判断是否为最后一个元素

  }, {
    key: "render",
    value: function render() {
      var _this5 = this;

      var _this$props5 = this.props,
          prefixCls = _this$props5.prefixCls,
          className = _this$props5.className,
          defaultMenu = _this$props5.defaultMenu,
          options = _this$props5.options,
          defaultValue = _this$props5.defaultValue,
          onSelect = _this$props5.onSelect,
          onChange = _this$props5.onChange,
          changeOnSelect = _this$props5.changeOnSelect,
          childrenKeyName = _this$props5.childrenKeyName,
          other = _objectWithoutProperties(_this$props5, ["prefixCls", "className", "defaultMenu", "options", "defaultValue", "onSelect", "onChange", "changeOnSelect", "childrenKeyName"]);

      var value = this.state.value;
      var classString = classNames(prefixCls, className);
      return React.createElement("div", {
        className: classString
      }, this.getShowMenus().map(function (ele, i) {
        return React.createElement(Menu, _extends({
          key: i,
          className: "".concat(prefixCls, "-submenu"),
          selectable: true,
          defaultValue: value[i],
          onChange: _this5.onChange(i),
          onSelect: _this5.onSelect(i)
        }, other), _this5.renderSubMenuItems(ele));
      }));
    }
  }]);

  return ParallelMenu;
}(React.PureComponent);

_defineProperty(ParallelMenu, "propTypes", {
  /**
   * 类前缀
   * */
  prefixCls: PropTypes.string,

  /**
   * 类名
   * */
  className: PropTypes.string,

  /**
   * 默认值
   * */
  defaultValue: PropTypes.array,

  /**
   * 树结构值
   * */
  options: PropTypes.array,

  /**
   * 选中回调
   * */
  onSelect: PropTypes.func,

  /**
   * 改变值回调
   * */
  onChange: PropTypes.func,

  /**
   * 选即变
   * */
  changeOnSelect: PropTypes.bool,

  /**
   * options子元素key值
   * */
  childrenKeyName: PropTypes.string
});

_defineProperty(ParallelMenu, "defaultProps", {
  prefixCls: 'ne-parallel-menu',
  defaultValue: [],
  changeOnSelect: false,
  childrenKeyName: 'children'
});

_defineProperty(ParallelMenu, "displayName", 'NeatUI.ParallelMenu');

export default ParallelMenu;