import _defineProperty from 'babel-runtime/helpers/defineProperty';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
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/input/Input.jsx';
import React, { cloneElement, isValidElement } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Icon from '../icon';

var Input = function (_React$Component) {
    _inherits(Input, _React$Component);

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

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

        _this.isControlled = false;

        _this.handleChange = function (e) {
            var onChange = _this.props.onChange;

            if (!_this.isControlled) {
                _this.setState({ value: e.target.value });
            }
            if (onChange) {
                onChange(e, e.target.value);
            }
        };

        _this.handleFocus = function (e) {
            var onFocus = _this.props.onFocus;

            if (_this.props.disabled) {
                e && e.stopPropagation();
                return;
            }

            _this.setState({ focused: true });
            onFocus && onFocus(e);
        };

        _this.handleBlur = function (e) {
            var onBlur = _this.props.onBlur;

            _this.setState({ focused: false });
            onBlur && onBlur(e);
        };

        _this.handleDeleteAll = function (e) {
            var _this$props = _this.props,
                onDeleteAll = _this$props.onDeleteAll,
                onChange = _this$props.onChange;

            if (!_this.isControlled) {
                if (_this.inputEl) _this.inputEl.focus();
                _this.setState({
                    value: ''
                });
            }
            if (onDeleteAll) {
                onDeleteAll(e);
            }
            if (_this.inputEl && onChange) {
                _this.inputEl.value = '';
                onChange({ target: _this.inputEl, type: 'change' }, '');
            }
        };

        _this.getInputEl = function (el) {
            _this.inputEl = el;
            var inputRef = _this.props.inputRef;

            inputRef && inputRef(el);
        };

        _this.getMaskEl = function (el) {
            _this.maskEl = el;
        };

        _this.handleClick = function () {
            var _this$props2;

            if (!_this.state.focused) {
                _this.maskEl ? _this.maskEl.focus() : _this.inputEl && _this.inputEl.focus();
                _this.handleFocus();
            }
            _this.props.onClick && (_this$props2 = _this.props).onClick.apply(_this$props2, arguments);
        };

        _this.isControlled = props.value != null;
        _this.state = {
            focused: false
        };
        if (!_this.isControlled) {
            _this.state = {
                value: props.defaultValue,
                focused: false
            };
        }
        return _this;
    }

    _createClass(Input, [{
        key: 'componentWillReceiveProps',
        value: function componentWillReceiveProps(newProps, newContext) {
            if (!this.isControlled && newProps.value != null) {
                this.isControlled = true;
                this.setState({
                    value: null
                });
            }
            if (!this.isControlled && newProps.defaultValue !== this.props.defaultValue) {
                this.setState({
                    value: newProps.defaultValue
                });
            }
            if (newProps.disabled && !this.props.disabled || this.context && newContext && newContext.disabled && !this.context.disabled) {
                this.setState({
                    focused: false
                });
            }
        }
    }, {
        key: 'render',
        value: function render() {
            var _classNames, _classNames3;

            var _props = this.props,
                error = _props.error,
                type = _props.type,
                className = _props.className,
                prefixCls = _props.prefixCls,
                showDeleteBtn = _props.showDeleteBtn,
                clearable = _props.clearable,
                prefix = _props.prefix,
                deleteAllIcon = _props.deleteAllIcon,
                onDeleteAll = _props.onDeleteAll,
                value = _props.value,
                defaultValue = _props.defaultValue,
                inputRef = _props.inputRef,
                inputProps = _props.inputProps,
                disabled = _props.disabled,
                suffix = _props.suffix,
                mask = _props.mask,
                multiline = _props.multiline,
                onClick = _props.onClick,
                size = _props.size,
                readOnly = _props.readOnly,
                placeholder = _props.placeholder,
                rows = _props.rows,
                rowsMax = _props.rowsMax,
                onChange = _props.onChange,
                autoComplete = _props.autoComplete,
                noWrapper = _props.noWrapper,
                onBlur = _props.onBlur,
                onFocus = _props.onFocus,
                other = _objectWithoutProperties(_props, ['error', 'type', 'className', 'prefixCls', 'showDeleteBtn', 'clearable', 'prefix', 'deleteAllIcon', 'onDeleteAll', 'value', 'defaultValue', 'inputRef', 'inputProps', 'disabled', 'suffix', 'mask', 'multiline', 'onClick', 'size', 'readOnly', 'placeholder', 'rows', 'rowsMax', 'onChange', 'autoComplete', 'noWrapper', 'onBlur', 'onFocus']);

            var classes = classNames(prefixCls + '-container', (_classNames = {}, _defineProperty(_classNames, prefixCls + '-focused', this.state.focused), _defineProperty(_classNames, prefixCls + '-error', error), _defineProperty(_classNames, prefixCls + '-disabled', disabled), _defineProperty(_classNames, prefixCls + '-' + size, size), _classNames), className);
            var inputValue = this.isControlled ? value : this.state.value;
            var deleteAllBtn = cloneElement(deleteAllIcon, {
                className: classNames(prefixCls + '-delete', _defineProperty({}, prefixCls + '-delete-show', inputValue), deleteAllIcon.props.className),
                onClick: this.handleDeleteAll
            });
            var InputBase = multiline ? 'textarea' : 'input';
            var newPrefix = noWrapper || isValidElement(prefix) ? React.Children.map(prefix, function (item) {
                if (React.isValidElement(item)) {
                    return React.cloneElement(item, {
                        className: classNames(item.props.className, prefixCls + '-prefix')
                    });
                }
            }) : prefix ? React.createElement(
                'span',
                { className: prefixCls + '-prefix', __source: {
                        fileName: _jsxFileName,
                        lineNumber: 285
                    },
                    __self: this
                },
                prefix
            ) : null;
            var newSuffix = noWrapper || isValidElement(prefix) ? React.Children.map(suffix, function (item) {
                if (React.isValidElement(item)) {
                    return React.cloneElement(item, {
                        className: classNames(item.props.className, prefixCls + '-suffix')
                    });
                }
            }) : suffix ? React.createElement(
                'span',
                { className: prefixCls + '-suffix', __source: {
                        fileName: _jsxFileName,
                        lineNumber: 297
                    },
                    __self: this
                },
                suffix
            ) : null;
            return React.createElement(
                'div',
                Object.assign({ className: classes }, other, { onClick: this.handleClick, __source: {
                        fileName: _jsxFileName,
                        lineNumber: 300
                    },
                    __self: this
                }),
                newPrefix,
                mask != null ? React.createElement(
                    'div',
                    Object.assign({
                        tabIndex: disabled ? '-1' : '0',
                        className: classNames(prefixCls + '-mask', (_classNames3 = {}, _defineProperty(_classNames3, prefixCls + '-mask-editable', !readOnly), _defineProperty(_classNames3, prefixCls + '-mask-placeholder', mask.length === 0), _classNames3))
                    }, inputProps, {
                        id: null,
                        ref: this.getMaskEl,
                        onChange: this.handleChange,
                        onFocus: this.handleFocus,
                        onBlur: this.handleBlur, __source: {
                            fileName: _jsxFileName,
                            lineNumber: 303
                        },
                        __self: this
                    }),
                    !mask || mask.length <= 0 ? placeholder : mask
                ) : null,
                React.createElement(InputBase, Object.assign({
                    autoComplete: autoComplete,
                    disabled: disabled,
                    ref: this.getInputEl,
                    className: classNames(prefixCls),
                    type: type,
                    value: inputValue,
                    readOnly: mask || readOnly,
                    placeholder: placeholder,
                    rows: rows,
                    'aria-invalid': error
                }, inputProps, {
                    onChange: this.handleChange,
                    onFocus: this.handleFocus,
                    onBlur: this.handleBlur,
                    __source: {
                        fileName: _jsxFileName,
                        lineNumber: 318
                    },
                    __self: this
                })),
                clearable || showDeleteBtn ? deleteAllBtn : null,
                newSuffix
            );
        }
    }]);

    return Input;
}(React.Component);

Input.propTypes = {
    /**
     * 多行，即textarea
     */
    multiline: PropTypes.bool,
    /**
     * 错误状态(todo)
     */
    error: PropTypes.bool,
    /**
     * 是否禁用
     */
    disabled: PropTypes.bool,
    /**
     * @ignore
     */
    prefixCls: PropTypes.string,
    /**
     * 声明 input 类型，同原生 input 标签的 type 属性
     */
    type: PropTypes.string,
    /**
     * @ignore
     */
    className: PropTypes.string,
    /**
     * 默认值
     */
    defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))]),
    /**
     * 是否显示清空按钮
     */
    clearable: PropTypes.bool,
    showDeleteBtn: PropTypes.bool,
    /**
     * 获取input ref
     */
    inputRef: PropTypes.func,
    /**
     * @ignore
     */
    onChange: PropTypes.func,
    /**
     * @ignore
     */
    onBlur: PropTypes.func,
    /**
     * 清空输入框回调
     */
    onDeleteAll: PropTypes.func,
    /**
     * 清空按钮样式
     */
    deleteAllIcon: PropTypes.node,
    /**
     * input元素的值，受控模式下使用
     */
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))]),
    /**
     * @ignore
     */
    mask: PropTypes.node,
    /**
     * 前缀
     */
    prefix: PropTypes.node,
    /**
     * 后缀
     */
    suffix: PropTypes.node,
    /**
     * input元素属性
     */
    inputProps: PropTypes.object,
    /**
     * 是否只读
     */
    readOnly: PropTypes.bool,
    /**
     * 组件尺寸
     */
    size: PropTypes.oneOf(['small', 'medium', 'large']),
    /**
     * 占位文本
     */
    placeholder: PropTypes.node,
    /**
     * textarea行数
     */
    rows: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    /**
     * 是否允许浏览器自动填充
     */
    autoComplete: PropTypes.oneOf(['off', 'on'])
};
Input.defaultProps = {
    defaultValue: '',
    readOnly: false,
    multiline: false,
    prefixCls: 'ne-input',
    error: false,
    disabled: false,
    clearable: false,
    type: 'text',
    deleteAllIcon: React.createElement(Icon, { type: 'cancel-o', __source: {
            fileName: _jsxFileName,
            lineNumber: 119
        },
        __self: this
    }),
    size: 'medium'
};
Input.displayName = 'NeatUI.Input';


export default Input;