"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireDefault(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _utils = require("./utils");

var _input = require("./input");

var _context = require("../config-provider/context");

var _rcResizeObserver = _interopRequireDefault(require("../components/rc-resize-observer"));

function getMaxLengthVal(value, maxLength) {
  return (value || '').split('').slice(0, maxLength).join('');
}

var TextArea = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
  var className = props.className,
      style = props.style,
      textareaStyle = props.textareaStyle,
      showCount = props.showCount,
      defaultValue = props.defaultValue,
      clearable = props.clearable,
      size = props.size,
      maxLength = props.maxLength,
      chineseCalc = props.chineseCalc,
      proportion = props.proportion,
      leftBottomNode = props.leftBottomNode,
      onPressEnter = props.onPressEnter,
      onKeyDown = props.onKeyDown,
      onChange = props.onChange,
      onCompositionStart = props.onCompositionStart,
      onCompositionEnd = props.onCompositionEnd,
      inputProps = (0, _objectWithoutProperties2.default)(props, ["className", "style", "textareaStyle", "showCount", "defaultValue", "clearable", "size", "maxLength", "chineseCalc", "proportion", "leftBottomNode", "onPressEnter", "onKeyDown", "onChange", "onCompositionStart", "onCompositionEnd"]);

  var _React$useState = _react.default.useState(props.value || defaultValue),
      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
      inputValue = _React$useState2[0],
      setInputValue = _React$useState2[1];

  var _React$useState3 = _react.default.useState(false),
      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
      compositing = _React$useState4[0],
      setCompositing = _React$useState4[1];

  var inputRef = ref || _react.default.useRef();

  var _React$useState5 = _react.default.useState({
    width: style === null || style === void 0 ? void 0 : style.width,
    height: style === null || style === void 0 ? void 0 : style.height
  }),
      _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
      wrapperSize = _React$useState6[0],
      setWrapperSize = _React$useState6[1];

  var _React$useContext = _react.default.useContext(_context.ConfigContext),
      getPrefixClassName = _React$useContext.getPrefixClassName;

  var inputCls = getPrefixClassName('input-textarea');
  var hasMaxLength = Number(maxLength) > 0;

  if (typeof props.value !== 'undefined' && props.value !== inputValue) {
    setInputValue(props.value);
  }

  var handleCompositionStart = function handleCompositionStart(e) {
    setCompositing(true);
    onCompositionStart === null || onCompositionStart === void 0 ? void 0 : onCompositionStart(e);
  };

  var handleOnChange = function handleOnChange(e, changeVal) {
    var currentTarget = e.currentTarget;
    var event = Object.create(e);
    event.target = currentTarget;
    event.currentTarget = currentTarget;
    currentTarget.value = changeVal;
    onChange === null || onChange === void 0 ? void 0 : onChange(event, (0, _utils.getWordLen)(changeVal, proportion, chineseCalc));
  };

  var handleCompositionEnd = function handleCompositionEnd(e) {
    var val = e.currentTarget.value;

    if (hasMaxLength) {
      val = getMaxLengthVal(val, maxLength);
    } // 如果和onchange完毕时的值相同则不触发更新


    if (val !== inputValue) {
      setInputValue(val);
      handleOnChange === null || handleOnChange === void 0 ? void 0 : handleOnChange(e, val);
    }

    setCompositing(false);
    onCompositionEnd === null || onCompositionEnd === void 0 ? void 0 : onCompositionEnd(e);
  }; // handle


  var handleChange = function handleChange(evt) {
    // 修复设置 value 的时候输入内容可以修改
    var val = evt.target.value;

    if (hasMaxLength && !compositing) {
      val = getMaxLengthVal(val, maxLength);
    }

    if (typeof props.value === 'undefined') {
      setInputValue(val);
    }

    handleOnChange === null || handleOnChange === void 0 ? void 0 : handleOnChange(evt, val);
  };

  var handleKeyDown = function handleKeyDown(e) {
    if (onPressEnter && e.keyCode === 13) {
      onPressEnter(e);
    }

    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
  };

  var onTextareaResize = function onTextareaResize(_ref) {
    var _inputRef$current;

    var width = _ref.width,
        height = _ref.height;
    var textareaCss = (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.style;

    if (!textareaCss || !textareaCss.width && !textareaCss.height) {
      return;
    }

    setWrapperSize({
      width: width,
      height: height
    });
  };

  var leftBottomNodeMemo = _react.default.useMemo(function () {
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, leftBottomNode && /*#__PURE__*/_react.default.createElement("div", {
      className: "".concat(inputCls, "-leftBottomNode")
    }, leftBottomNode));
  }, [leftBottomNode]); // render


  var renderTextarea = function renderTextarea(wrapper) {
    var _cx;

    return /*#__PURE__*/_react.default.createElement(_rcResizeObserver.default, {
      onResize: onTextareaResize
    }, /*#__PURE__*/_react.default.createElement("textarea", Object.assign({}, inputProps, {
      ref: inputRef,
      value: (0, _input.getControlledValue)(inputValue),
      maxLength: maxLength,
      style: !wrapper ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, style), textareaStyle) : textareaStyle,
      className: (0, _classnames.default)(inputCls, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(inputCls, "-").concat(size), !showCount && size), (0, _defineProperty2.default)(_cx, "".concat(className), !showCount), _cx)),
      onChange: handleChange,
      onCompositionStart: handleCompositionStart,
      onCompositionEnd: handleCompositionEnd,
      onKeyDown: handleKeyDown
    })));
  };

  if (!showCount) {
    if (leftBottomNode) {
      return /*#__PURE__*/_react.default.createElement("div", {
        className: "".concat(inputCls, "-wrap"),
        style: style
      }, renderTextarea(true), leftBottomNodeMemo);
    }

    return renderTextarea();
  }

  var countLength = (0, _utils.getWordLen)(inputValue, proportion, chineseCalc);
  var hasCountError = hasMaxLength ? countLength > Number(maxLength) : false;
  var countText = typeof showCount === 'function' ? showCount(countLength, maxLength) : countLength + (hasMaxLength ? "/".concat(maxLength) : '');
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)("".concat(inputCls, "-wrapper"), hasCountError && "".concat(inputCls, "-count-error"), size && "".concat(inputCls, "-wrapper-").concat(size), props.disabled && "".concat(inputCls, "-wrapper-disabled"), className),
    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, style), {}, {
      width: wrapperSize.width,
      height: wrapperSize.height
    }),
    "data-count": countText
  }, renderTextarea(true), /*#__PURE__*/_react.default.createElement("span", {
    className: "".concat(inputCls, "-count"),
    onClick: function onClick() {
      inputRef.current.focus();
      inputRef.current.setSelectionRange((0, _input.getControlledValue)(inputValue).length, (0, _input.getControlledValue)(inputValue).length);
    }
  }, countText), leftBottomNodeMemo);
});

TextArea.displayName = 'TextArea';
TextArea.defaultProps = {
  disabled: false,
  clearable: false,
  proportion: 2
};
var _default = TextArea;
exports.default = _default;