import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import React, { Children, cloneElement, isValidElement } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Close from '../icons/internals/Close';
import Error from '../icons/internals/Error';
import CheckCircle from '../icons/internals/CheckCircle';
import Rolling from '../icons/internals/Rolling';
var defaultPrefixCls = 'ne-input';

var Input =
/*#__PURE__*/
function (_React$Component) {
  _inherits(Input, _React$Component);

  _createClass(Input, null, [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(props, state) {
      var defaultValue = props.defaultValue;

      if (!state.isControlled && defaultValue !== state.prevDefaultValue) {
        return {
          value: defaultValue,
          prevDefaultValue: defaultValue
        };
      }

      return null;
    }
  }]);

  function Input(props, context) {
    var _this;

    _classCallCheck(this, Input);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Input).call(this, props, context));

    _defineProperty(_assertThisInitialized(_this), "isControlled", false);

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

    _defineProperty(_assertThisInitialized(_this), "handleFocus", function (e) {
      var _this$props = _this.props,
          onFocus = _this$props.onFocus,
          disabled = _this$props.disabled;

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

      _this.setState({
        focused: true
      });

      onFocus && onFocus(e);
    });

    _defineProperty(_assertThisInitialized(_this), "handleBlur", function (e) {
      var onBlur = _this.props.onBlur;

      _this.setState({
        focused: false
      });

      onBlur && onBlur(e);
    });

    _defineProperty(_assertThisInitialized(_this), "handleDeleteAll", function (e) {
      var _this$props2 = _this.props,
          onDeleteAll = _this$props2.onDeleteAll,
          onClear = _this$props2.onClear,
          onChange = _this$props2.onChange;

      if (!_this.isControlled) {
        if (_this.inputEl) _this.inputEl.focus();

        _this.setState({
          value: ''
        });
      }

      if (onClear) {
        onClear(e);
      } else if (onDeleteAll) {
        onDeleteAll(e);
      }

      if (_this.inputEl && onChange) {
        _this.inputEl.value = '';
        onChange({
          target: _this.inputEl,
          type: 'change'
        }, '');
      }
    });

    _defineProperty(_assertThisInitialized(_this), "getInputEl", function (el) {
      _this.inputEl = el;
      var inputRef = _this.props.inputRef;
      inputRef && inputRef(el);
    });

    _defineProperty(_assertThisInitialized(_this), "handleClick", function () {
      var onClick = _this.props.onClick;
      _this.inputEl && _this.inputEl.focus();

      _this.handleFocus();

      onClick && onClick.apply(void 0, arguments);
    });

    _defineProperty(_assertThisInitialized(_this), "maskRender", function () {
      var _this$props3 = _this.props,
          maskRender = _this$props3.maskRender,
          disabled = _this$props3.disabled,
          prefixCls = _this$props3.prefixCls,
          mask = _this$props3.mask,
          placeholder = _this$props3.placeholder,
          id = _this$props3.id;
      var focused = _this.state.focused;

      if (maskRender) {
        var handlers = {
          onChange: _this.handleChange,
          onFocus: _this.handleFocus,
          onBlur: _this.handleBlur
        };
        return maskRender(_this.props, handlers, focused);
      }

      return React.createElement("div", {
        // tabIndex={disabled ? '-1' : isValidElement(mask) ? null : '0'}
        className: classNames("".concat(prefixCls, "-mask"), _defineProperty({}, "".concat(prefixCls, "-mask-placeholder"), mask.length === 0))
      }, React.createElement("input", {
        onChange: _this.handleChange,
        onFocus: _this.handleFocus,
        onBlur: _this.handleBlur,
        ref: _this.getInputEl,
        "aria-invalid": true,
        className: "".concat(prefixCls, "-mask-input"),
        id: id,
        disabled: disabled
      }), React.createElement("div", {
        className: "".concat(prefixCls, "-mask-content")
      }, !mask || mask.length <= 0 ? placeholder : mask));
    });

    var value = props.value,
        defaultValue = props.defaultValue;
    _this.isControlled = value != null;
    _this.state = {
      focused: false
    };
    _this.state = {
      value: defaultValue,
      prevDefaultValue: defaultValue,
      isControlled: _this.isControlled,
      focused: false
    };
    return _this;
  }

  _createClass(Input, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      var value = this.props.value;

      if (!this.isControlled && value != null) {
        this.isControlled = true;
        this.setState({
          value: null
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _classNames2;

      var _this$props4 = this.props,
          error = _this$props4.error,
          type = _this$props4.type,
          className = _this$props4.className,
          prefixCls = _this$props4.prefixCls,
          showDeleteBtn = _this$props4.showDeleteBtn,
          clearable = _this$props4.clearable,
          prefix = _this$props4.prefix,
          clearIcon = _this$props4.clearIcon,
          onDeleteAll = _this$props4.onDeleteAll,
          value = _this$props4.value,
          defaultValue = _this$props4.defaultValue,
          inputRef = _this$props4.inputRef,
          inputProps = _this$props4.inputProps,
          disabled = _this$props4.disabled,
          suffix = _this$props4.suffix,
          mask = _this$props4.mask,
          multiline = _this$props4.multiline,
          onClick = _this$props4.onClick,
          size = _this$props4.size,
          readOnly = _this$props4.readOnly,
          placeholder = _this$props4.placeholder,
          rows = _this$props4.rows,
          rowsMax = _this$props4.rowsMax,
          onChange = _this$props4.onChange,
          autoComplete = _this$props4.autoComplete,
          onBlur = _this$props4.onBlur,
          onFocus = _this$props4.onFocus,
          status = _this$props4.status,
          fullWidth = _this$props4.fullWidth,
          errorIcon = _this$props4.errorIcon,
          loadingIcon = _this$props4.loadingIcon,
          successIcon = _this$props4.successIcon,
          showStatusIcon = _this$props4.showStatusIcon,
          onClear = _this$props4.onClear,
          maskRender = _this$props4.maskRender,
          style = _this$props4.style,
          other = _objectWithoutProperties(_this$props4, ["error", "type", "className", "prefixCls", "showDeleteBtn", "clearable", "prefix", "clearIcon", "onDeleteAll", "value", "defaultValue", "inputRef", "inputProps", "disabled", "suffix", "mask", "multiline", "onClick", "size", "readOnly", "placeholder", "rows", "rowsMax", "onChange", "autoComplete", "onBlur", "onFocus", "status", "fullWidth", "errorIcon", "loadingIcon", "successIcon", "showStatusIcon", "onClear", "maskRender", "style"]);

      var _this$state = this.state,
          focused = _this$state.focused,
          stateValue = _this$state.value;
      var classes = classNames("".concat(prefixCls, "-container"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-focused"), focused), _defineProperty(_classNames2, "".concat(prefixCls, "-fullWidth"), fullWidth), _defineProperty(_classNames2, "".concat(prefixCls, "-multiline"), multiline), _defineProperty(_classNames2, "".concat(prefixCls, "-error"), error), _defineProperty(_classNames2, "".concat(prefixCls, "-").concat(status), status), _defineProperty(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames2, "".concat(prefixCls, "-").concat(size), size), _classNames2), className);
      var inputValue = this.isControlled ? value : stateValue;
      var deleteAllBtn = cloneElement(clearIcon, {
        className: classNames("".concat(prefixCls, "-delete"), _defineProperty({}, "".concat(prefixCls, "-delete-show"), inputValue), clearIcon.props.className),
        onClick: this.handleDeleteAll
      });
      var InputBase = multiline ? 'textarea' : 'input';
      var newPrefix = Children.map(prefix, function (item) {
        if (isValidElement(item)) {
          return cloneElement(item, {
            className: classNames(item.props.className, "".concat(prefixCls, "-prefix"))
          });
        }
      });

      if (newPrefix && newPrefix.length < 1) {
        newPrefix = React.createElement("span", {
          className: "".concat(prefixCls, "-prefix")
        }, prefix);
      }

      var newSuffix = Children.map(suffix, function (item) {
        if (isValidElement(item)) {
          return cloneElement(item, {
            className: classNames(item.props.className, "".concat(prefixCls, "-suffix"))
          });
        }
      });

      if (newSuffix && newSuffix.length < 1) {
        newSuffix = React.createElement("span", {
          className: "".concat(prefixCls, "-suffix")
        }, suffix);
      }

      var statusIcons = {
        error: errorIcon,
        loading: loadingIcon,
        success: successIcon
      };
      var statusIcon = isValidElement(statusIcons[status]) ? cloneElement(statusIcons[status], {
        className: classNames(statusIcons[status].props.className, "".concat(prefixCls, "-status-icon"))
      }) : null;
      return React.createElement("div", {
        className: classes,
        onClick: this.handleClick,
        style: style
      }, newPrefix, mask != null || maskRender ? this.maskRender() : React.createElement(InputBase, _extends({
        autoComplete: autoComplete,
        disabled: disabled,
        ref: this.getInputEl,
        className: classNames(prefixCls),
        type: type,
        value: inputValue,
        readOnly: !!(mask || maskRender || readOnly),
        placeholder: placeholder,
        rows: rows,
        "aria-invalid": error || status === 'error'
      }, other, {
        onChange: this.handleChange,
        onFocus: this.handleFocus,
        onBlur: this.handleBlur
      })), clearable || showDeleteBtn ? deleteAllBtn : null, showStatusIcon && statusIcon ? statusIcon : newSuffix);
    }
  }]);

  return Input;
}(React.Component);

_defineProperty(Input, "propTypes", {
  /**
   * 多行，即textarea
   */
  multiline: PropTypes.bool,
  status: PropTypes.oneOf(['error', 'success', 'loading', 'default']),

  /**
   * 错误状态(todo)
   */
  error: PropTypes.bool,

  /**
   * 是否禁用
   */
  disabled: PropTypes.bool,

  /**
   * @ignore
   */
  prefixCls: PropTypes.string,

  /**
   * 声明 input 类型，同原生 input 标签的 type 属性
   */
  type: PropTypes.string,

  /**
   * 默认值
   */
  defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))]),

  /**
   * 是否显示清空按钮
   */
  clearable: PropTypes.bool,

  /**
   * 获取input ref
   */
  inputRef: PropTypes.func,

  /**
   * 清空输入框回调
   */
  onClear: PropTypes.func,

  /**
   * 清空按钮样式
   */
  clearIcon: 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,

  /**
   * 是否只读
   */
  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']),

  /**
   * 是否占满整行
   */
  fullWidth: PropTypes.bool
});

_defineProperty(Input, "defaultProps", {
  defaultValue: '',
  readOnly: false,
  multiline: false,
  prefixCls: defaultPrefixCls,
  error: false,
  disabled: false,
  clearable: false,
  type: 'text',
  clearIcon: React.createElement(Close, null),
  size: 'medium',
  status: 'default',
  fullWidth: false,
  errorIcon: React.createElement(Error, {
    className: "".concat(defaultPrefixCls, "-status-icon ne-icon-error")
  }),
  loadingIcon: React.createElement(Rolling, {
    className: "".concat(defaultPrefixCls, "-status-icon ne-icon-loading")
  }),
  successIcon: React.createElement(CheckCircle, {
    className: "".concat(defaultPrefixCls, "-status-icon ne-icon-success")
  })
});

export default Input;