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';

/**
 * 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.renderChildern = function (children) {
            return children.map(function (ele, i) {
                if (ele.children) {
                    return React.createElement(
                        SubMenu,
                        { key: i, mode: 'parallel', value: ele.value, title: ele.label, disabled: ele.disabled, __source: {
                                fileName: _jsxFileName,
                                lineNumber: 115
                            },
                            __self: _this2
                        },
                        ele.children && _this.renderChildern(ele.children)
                    );
                } 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: 126
                                },
                                __self: _this2
                            })), __source: {
                                fileName: _jsxFileName,
                                lineNumber: 121
                            },
                            __self: _this2
                        },
                        ele.label
                    );
                }
            });
        };

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

        _this.onChange = function (e, val, i) {
            var _this$props = _this.props,
                onChange = _this$props.onChange,
                changeOnSelect = _this$props.changeOnSelect,
                defaultValue = _this$props.defaultValue;

            _this.currentValue[i] = val;
            _this.currentValue = _this.currentValue.slice(0, i + 1);
            var isLast = _this.isLast;
            if (changeOnSelect || isLast && _this.currentValue.toString() !== defaultValue.toString()) {
                onChange && onChange(_this.currentValue);
            }
        };

        _this.onSelect = function (e, val, i) {
            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 newValue = [].concat(_toConsumableArray(value));
            newValue[i] = val;
            newValue = newValue.slice(0, i + 1);
            _this.setState({
                value: newValue
            });
            var isLast = _this.isLast;
            onSelect && onSelect(e, val, isLast, i);
            if (changeOnSelect && _this.currentValue[i] === val && !isLast && newValue.toString() !== defaultValue.toString()) {
                _this.currentValue = [].concat(_toConsumableArray(newValue));
                onChange && onChange(_this.currentValue);
            }
        };

        _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
                });
            }
        }
    }, {
        key: 'getMenuItems',
        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 = item.type.displayName !== 'NeatUI.SubMenu';
                        }
                    }));
                }
            });
            return items;
        }
    }, {
        key: 'renderSubMenuItems',
        value: function renderSubMenuItems(ele) {
            var _this4 = this;

            var menu = void 0;
            if (Array.isArray(ele) && ele.length) {
                menu = this.getMenuItems(ele);
            } else {
                menu = cloneElement(ele, {
                    onClick: function onClick() {
                        return _this4.isLast = ele.type.displayName !== 'NeatUI.SubMenu';
                    }
                });
                // menu = ele;
            }
            return menu;
        }
    }, {
        key: 'getActiveMenuItems',
        value: function getActiveMenuItems(values) {
            var value = this.state.value;

            value = values || value;
            var option = this.getMenuItems(this.childrenEle);
            return this.elTreeFilter(option, function (o, level) {
                return o.props.value === value[level];
            });
        }
    }, {
        key: 'getShowMenus',
        value: function getShowMenus() {
            var _this5 = this;

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

            this.childrenEle = options ? this.renderChildern(options) : children;
            var result = this.getActiveMenuItems().map(function (activeOption) {
                return _this5.getValidChildren(activeOption.props.children).length && activeOption.props.children;
            }).filter(function (activeOption) {
                return !!activeOption;
            });
            result.unshift(this.childrenEle);
            return result;
        }
    }, {
        key: 'elTreeFilter',
        value: function elTreeFilter(data, filterFn) {
            var children = data || [];
            var result = [];
            var level = 0;
            var filterCallBack = function filterCallBack(item) {
                return filterFn(item, level);
            };
            do {
                var foundItem = children.filter(filterCallBack)[0];
                if (!foundItem) {
                    break;
                }
                result.push(foundItem);
                children = this.getValidChildren(foundItem.props.children);
                level += 1;
            } while (children.length);

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

            var result = void 0;
            if (Array.isArray(children)) {
                result = children.filter(function (o) {
                    return _this6.isSubMenu(o) || o.type.displayName === 'NeatUI.MenuItem';
                });
            } else if (isValidElement(children) && (this.isSubMenu(children) || children.type.displayName === 'NeatUI.MenuItem')) {
                result = [children];
            } else {
                result = [];
            }
            return result;
        }
    }, {
        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,
                other = _objectWithoutProperties(_props2, ['prefixCls', 'className', 'defaultMenu', 'options', 'defaultValue', 'onSelect', 'onChange', 'changeOnSelect']);

            var value = this.state.value;

            var classString = classNames(prefixCls, className);
            return defaultMenu === null ? React.createElement(
                'div',
                { className: classString, __source: {
                        fileName: _jsxFileName,
                        lineNumber: 233
                    },
                    __self: this
                },
                this.getShowMenus().map(function (ele, i) {
                    var isLast = (ele[0] ? ele[0].type.displayName : ele.type.displayName) !== 'NeatUI.SubMenu';
                    return React.createElement(
                        Menu,
                        Object.assign({
                            key: i,
                            selectable: true,
                            defaultValue: value[i],
                            onChange: function onChange(e, value) {
                                return _this7.onChange(e, value, i);
                            },
                            onSelect: function onSelect(e, value) {
                                return _this7.onSelect(e, value, i);
                            }
                        }, other, {
                            __source: {
                                fileName: _jsxFileName,
                                lineNumber: 237
                            },
                            __self: _this7
                        }),
                        _this7.renderSubMenuItems(ele)
                    );
                })
            ) : defaultMenu;
        }
    }]);

    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,
    /** @ignore*/
    defaultMenu: PropTypes.node
};
ParallelMenu.defaultProps = {
    prefixCls: 'ne-parallel-menu',
    defaultValue: [],
    defaultMenu: null,
    changeOnSelect: false
};


export default ParallelMenu;