import _defineProperty from 'babel-runtime/helpers/defineProperty';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import _extends from 'babel-runtime/helpers/extends';
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/Tag.jsx';
/**
 * tag.jsx
 *
 * @Author: zhangce
 * @Date: 17/8/23 上午11:36
 */

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Icon from '../icon';
import Input from '../input';

/**
 * Tag
 * */

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

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

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

        _this.getStyleInline = function () {
            var _this$props = _this.props,
                color = _this$props.color,
                hasBorder = _this$props.hasBorder,
                style = _this$props.style;

            return !color ? null : hasBorder ? _extends({
                color: color,
                borderColor: color
            }, style) : _extends({
                color: color
            }, style);
        };

        _this.onDelete = function (e) {
            var _this$props2 = _this.props,
                onDelete = _this$props2.onDelete,
                disabled = _this$props2.disabled;

            if (onDelete && !disabled) {
                onDelete(e);
            }
            if (e.defaultPrevented || disabled) {
                return;
            }
            _this.setState({
                deleting: true
            }, function () {
                setTimeout(function () {
                    _this.setState({
                        isClosed: true
                    });
                }, 200);
            });
        };

        _this.setInput = function (e) {
            var showInput = _this.state.showInput;

            e.preventDefault();
            if (e.target.tagName !== 'INPUT') {
                _this.setState({
                    showInput: !showInput
                });
            }
        };

        _this.onInputBlur = function () {
            var onInput = _this.props.onInput;
            var inputValue = _this.state.inputValue;

            var showInput = false;
            if (inputValue === '') {
                showInput = false;
            } else if (onInput) {
                showInput = !onInput(inputValue);
            }
            if (!showInput) {
                _this.setState({
                    showInput: showInput,
                    inputValue: ''
                });
            }
        };

        _this.handleChange = function (e) {
            _this.setState({
                inputValue: e.target.value
            });
        };

        _this.onKeyDown = function (e) {
            var enterKey = _this.props.enterKey;

            var charCode = e.which ? e.which : e.keyCode;
            if (enterKey.indexOf(charCode) !== -1) {
                e.preventDefault();
                _this.onInputBlur();
            }
        };

        _this.state = {
            isClosed: false,
            closing: false,
            showInput: false,
            inputValue: '',
            deleting: false
        };
        return _this;
    }

    _createClass(Tag, [{
        key: 'componentDidUpdate',
        value: function componentDidUpdate() {
            var afterClose = this.props.afterClose;
            var _state = this.state,
                showInput = _state.showInput,
                isClosed = _state.isClosed;

            if (showInput) {
                this.createInput && this.createInput.focus();
            }
            if (isClosed && afterClose) {
                afterClose();
            }
        }
    }, {
        key: 'render',
        value: function render() {
            var _classNames,
                _this2 = this;

            var _state2 = this.state,
                isClosed = _state2.isClosed,
                showInput = _state2.showInput,
                inputValue = _state2.inputValue,
                deleting = _state2.deleting;

            var _props = this.props,
                color = _props.color,
                hasBorder = _props.hasBorder,
                prefixCls = _props.prefixCls,
                children = _props.children,
                closable = _props.closable,
                isAddableTag = _props.isAddableTag,
                className = _props.className,
                onClick = _props.onClick,
                onInput = _props.onInput,
                onDelete = _props.onDelete,
                type = _props.type,
                size = _props.size,
                disabled = _props.disabled,
                afterClose = _props.afterClose,
                enterKey = _props.enterKey,
                other = _objectWithoutProperties(_props, ['color', 'hasBorder', 'prefixCls', 'children', 'closable', 'isAddableTag', 'className', 'onClick', 'onInput', 'onDelete', 'type', 'size', 'disabled', 'afterClose', 'enterKey']);

            var closeBtn = closable && !isAddableTag ? React.createElement(Icon, { className: prefixCls + '-icon-close', type: 'cancel', onClick: this.onDelete, __source: {
                    fileName: _jsxFileName,
                    lineNumber: 209
                },
                __self: this
            }) : null;
            var classString = classNames(prefixCls, prefixCls + '-' + size, (_classNames = {}, _defineProperty(_classNames, prefixCls + '-' + type, type && hasBorder && !color), _defineProperty(_classNames, prefixCls + '-bg', !hasBorder), _defineProperty(_classNames, prefixCls + '-disabled', disabled), _defineProperty(_classNames, prefixCls + '-bg-' + type, type && !hasBorder && !color), _defineProperty(_classNames, prefixCls + '-create', isAddableTag), _defineProperty(_classNames, prefixCls + '-create-input', isAddableTag && showInput), _defineProperty(_classNames, prefixCls + '-on-close', deleting), _classNames), className);
            var tag = isClosed ? null : React.createElement(
                'span',
                Object.assign({
                    className: classString,
                    style: this.getStyleInline(),
                    onClick: isAddableTag ? this.setInput : onClick
                }, other, {
                    __source: {
                        fileName: _jsxFileName,
                        lineNumber: 226
                    },
                    __self: this
                }),
                isAddableTag && showInput ? React.createElement(
                    'span',
                    {
                        __source: {
                            fileName: _jsxFileName,
                            lineNumber: 232
                        },
                        __self: this
                    },
                    React.createElement('input', {
                        disabled: disabled,
                        className: prefixCls + '-input',
                        ref: function ref(input) {
                            _this2.createInput = input;
                        },
                        value: inputValue,
                        onChange: this.handleChange,
                        onKeyDown: this.onKeyDown,
                        onBlur: this.onInputBlur,
                        __source: {
                            fileName: _jsxFileName,
                            lineNumber: 233
                        },
                        __self: this
                    })
                ) : React.createElement(
                    'span',
                    { className: prefixCls + '-content', __source: {
                            fileName: _jsxFileName,
                            lineNumber: 246
                        },
                        __self: this
                    },
                    children
                ),
                closeBtn
            );

            return tag;
        }
    }]);

    return Tag;
}(React.PureComponent);

Tag.propTypes = {
    /**
     * 类前缀
     * */
    prefixCls: PropTypes.string,
    /**
     * 类名
     * */
    className: PropTypes.string,
    /**
     * 标签颜色
     * */
    color: PropTypes.string,
    /**
     * 标签类型
     * */
    type: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'error', 'info']),
    /**
     * 标签大小
     * */
    size: PropTypes.oneOf(['small', 'medium', 'large']),
    /**
     * 是否禁用
     * */
    disabled: PropTypes.bool,
    /**
     * 是否可关闭标签
     * */
    closable: PropTypes.bool,
    /**
     * 标签是否为border类型
     * */
    hasBorder: PropTypes.bool,
    /**
     * 标签是否为创建标签
     * */
    isAddableTag: PropTypes.bool,
    /**
     * 删除动画结束
     * */
    afterClose: PropTypes.func,
    /**
     * 点击删除标签回调
     * */
    onDelete: PropTypes.func,
    /**
     * 点击标签回调
     * */
    onClick: PropTypes.func,
    /**
     * 添加标签Input方法
     * */
    onInput: PropTypes.func,
    /**
     * 创建新标签的键值
     * */
    enterKey: PropTypes.array
};
Tag.defaultProps = {
    prefixCls: 'ne-tag',
    hasBorder: true,
    closable: false,
    size: 'medium',
    enterKey: [13]
};


export default Tag;