import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
var _jsxFileName = 'src/menu/ParallelMenu.jsx';
/**
 * 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 Icon from '../icon';
import { isEqualArrays } from '../util/isEqual';
import { arrayTreeFilter } from '../util/arrayTreeFilter';
/**
 * ParallelMenu
 * @description 用于级联组件
 */

var ParallelMenu = function (_React$PureComponent) {
    _inherits(ParallelMenu, _React$PureComponent);

    function ParallelMenu(props) {
        var _this2 = this;

        _classCallCheck(this, ParallelMenu);

        var _this = _possibleConstructorReturn(this, (ParallelMenu.__proto__ || Object.getPrototypeOf(ParallelMenu)).call(this, props));

        _this.isSubMenu = function (ele) {
            return ele.type.displayName === 'NeatUI.SubMenu';
        };

        _this.isMenuItem = function (ele) {
            return ele.type.displayName === 'NeatUI.MenuItem';
        };

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

        _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);
                }
            };
        };

        _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 = [].concat(_toConsumableArray(newValue));
                    onChange && onChange(_this.currentValue, _this.isLast);
                }
            };
        };

        _this.renderChildren = function (children) {
            var childrenKeyName = _this.props.childrenKeyName;

            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, __source: {
                                fileName: _jsxFileName,
                                lineNumber: 168
                            },
                            __self: _this2
                        },
                        ele[childrenKeyName] && _this.renderChildren(ele[childrenKeyName])
                    );
                } else {
                    return React.createElement(
                        MenuItem,
                        {
                            key: i,
                            value: ele.value,
                            disabled: ele.disabled,
                            suffix: ele.loading && (ele.loadingIcon || React.createElement(Icon, { className: 'loading-icon', type: 'spin3', spin: true, __source: {
                                    fileName: _jsxFileName,
                                    lineNumber: 179
                                },
                                __self: _this2
                            })), __source: {
                                fileName: _jsxFileName,
                                lineNumber: 174
                            },
                            __self: _this2
                        },
                        ele.label
                    );
                }
            });
        };

        _this.renderSubMenuItems = function (ele) {
            var menu = void 0;
            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, __source: {
                            fileName: _jsxFileName,
                            lineNumber: 210
                        },
                        __self: _this2
                    },
                    '\u6682\u65E0\u6570\u636E'
                );
            }
            return menu;
        };

        _this.currentValue = [].concat(_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 = [].concat(_toConsumableArray(newProps.defaultValue));
            }
        }

        // 判断元素为subMenu


        // 判断元素为menuItem

    }, {
        key: 'getMenuItems',


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

            var items = [];
            Children.forEach(children, function (item) {
                if (isValidElement(item)) {
                    items.push(cloneElement(item, {
                        onClick: function onClick() {
                            return _this3.isLast = !_this3.isSubMenu(item);
                        }
                    }));
                }
            });
            return items;
        }

        // 获取有效的子组件SubMenu/MenuItem

    }, {
        key: 'getValidChildren',
        value: function getValidChildren(children) {
            var _this4 = this;

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

        // 获取选中项

    }, {
        key: 'getActiveMenuItems',
        value: function getActiveMenuItems(values) {
            var _this5 = 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 _this5.getValidChildren(obj.props[childrenKeyName]);
            }, { childrenKeyName: childrenKeyName });
        }

        // options递归转换为树形结构组件

    }, {
        key: 'getShowMenus',


        // 渲染的menus
        value: function getShowMenus() {
            var _this6 = this;

            var _props = this.props,
                children = _props.children,
                options = _props.options;

            this.childrenEle = options ? this.renderChildren(options) : children;
            var result = this.getActiveMenuItems().map(function (activeOption) {
                return _this6.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 _this7 = this;

            var _props2 = this.props,
                prefixCls = _props2.prefixCls,
                className = _props2.className,
                defaultMenu = _props2.defaultMenu,
                options = _props2.options,
                defaultValue = _props2.defaultValue,
                onSelect = _props2.onSelect,
                onChange = _props2.onChange,
                changeOnSelect = _props2.changeOnSelect,
                childrenKeyName = _props2.childrenKeyName,
                other = _objectWithoutProperties(_props2, ['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, __source: {
                        fileName: _jsxFileName,
                        lineNumber: 231
                    },
                    __self: this
                },
                this.getShowMenus().map(function (ele, i) {
                    return React.createElement(
                        Menu,
                        Object.assign({
                            key: i,
                            selectable: true,
                            defaultValue: value[i],
                            onChange: _this7.onChange(i),
                            onSelect: _this7.onSelect(i)
                        }, other, {
                            __source: {
                                fileName: _jsxFileName,
                                lineNumber: 234
                            },
                            __self: _this7
                        }),
                        _this7.renderSubMenuItems(ele)
                    );
                })
            );
        }
    }]);

    return ParallelMenu;
}(React.PureComponent);

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
};
ParallelMenu.defaultProps = {
    prefixCls: 'ne-parallel-menu',
    defaultValue: [],
    changeOnSelect: false,
    childrenKeyName: 'children'
};


export default ParallelMenu;