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/tag/TagGroup.jsx';
/**
 * TagGroup.jsx
 *
 * @Author: zhangce
 * @Date: 18/8/7 下午5:35
 */

import React, { isValidElement, cloneElement, Children } from 'react';
import PropTypes from 'prop-types';
import Tag from './Tag';
import classNames from 'classnames';

/**
 * TagGroup
 * */

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

    function TagGroup(props, context) {
        _classCallCheck(this, TagGroup);

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

        _this.handleClose = function (tagRemove) {
            var onChange = _this.props.onChange;
            var tags = _this.state.tags;

            var newTags = tags.filter(function (tag) {
                return tag !== tagRemove;
            });
            _this.setState({ tags: newTags });
            onChange && onChange(newTags);
        };

        _this.createNewTag = function (inputValue) {
            var onChange = _this.props.onChange;
            var tags = _this.state.tags;

            if (tags.indexOf(inputValue) === -1) {
                var newTags = [].concat(_toConsumableArray(tags), [inputValue]);
                _this.setState({ tags: newTags });
                onChange && onChange(newTags);
            }
            return true;
        };

        _this.state = {
            tags: props.defaultValue
        };
        return _this;
    }

    _createClass(TagGroup, [{
        key: 'componentWillReceiveProps',
        value: function componentWillReceiveProps(newProps) {
            if (newProps.defaultValue !== this.props.defaultValue) {
                this.setState({
                    tags: newProps.defaultValue
                });
            }
        }
    }, {
        key: 'render',
        value: function render() {
            var _this2 = this;

            var _props = this.props,
                tagType = _props.tagType,
                addText = _props.addText,
                className = _props.className,
                children = _props.children,
                hasAddableTag = _props.hasAddableTag,
                prefixCls = _props.prefixCls;

            var items = Children.map(children, function (child, index) {
                if (!isValidElement(child)) {
                    return null;
                }
                return cloneElement(child, {
                    type: tagType || child.props.type,
                    closable: child.props.closable !== void 0 ? child.props.closable : true,
                    disabled: child.props.disabled,
                    onDelete: function onDelete() {
                        return _this2.handleClose(child.props.children);
                    }
                });
            });
            return React.createElement(
                'div',
                { className: classNames(prefixCls + '-contain', className), __source: {
                        fileName: _jsxFileName,
                        lineNumber: 103
                    },
                    __self: this
                },
                items,
                hasAddableTag && React.createElement(
                    Tag,
                    { isAddableTag: true, onInput: this.createNewTag, __source: {
                            fileName: _jsxFileName,
                            lineNumber: 106
                        },
                        __self: this
                    },
                    addText
                )
            );
        }
    }]);

    return TagGroup;
}(React.PureComponent);

TagGroup.propTypes = {
    /**
     * 类前缀
     * */
    prefixCls: PropTypes.string,
    /**
     * 类名
     * */
    className: PropTypes.string,
    /**
     * 默认值
     * */
    defaultValue: PropTypes.array,
    /**
     * 标签样式类型
     * */
    tagType: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'error', 'info']),
    /**
     * 添加新标签按钮的文案说明
     * */
    addText: PropTypes.string,
    /**
     * 值改变时回调函数
     * */
    onChange: PropTypes.func,
    /**
     * 是否显示添加按钮
     * */
    hasAddableTag: PropTypes.bool
};
TagGroup.defaultProps = {
    prefixCls: 'ne-tag-group',
    defaultValue: [],
    tagType: 'error',
    addText: '+ new Tag',
    hasAddableTag: true
};


export default TagGroup;