import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React from 'react';
import cx from 'classnames';
import { getWordLen, getChineseCalcValue } from './utils';
import { composeRef } from '../components/rc-util/ref';
import Icon from '../icon';
import { ConfigContext } from '../config-provider/context';
var CloseFill = Icon.CloseFill; // https://reactjs.org/docs/forms.html#controlled-input-null-value

export var getControlledValue = function getControlledValue(value) {
  if (typeof value === 'undefined' || value === null) return '';
  return value;
};
var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var prefix = props.prefix,
      suffix = props.suffix,
      addonBefore = props.addonBefore,
      addonAfter = props.addonAfter,
      clearable = props.clearable,
      defaultValue = props.defaultValue,
      onPressEnter = props.onPressEnter,
      customSize = props.size,
      wSize = props.wSize,
      showCount = props.showCount,
      style = props.style,
      className = props.className,
      bordered = props.bordered,
      chineseCalc = props.chineseCalc,
      _props$proportion = props.proportion,
      proportion = _props$proportion === void 0 ? 2 : _props$proportion,
      maxLength = props.maxLength,
      onCompositionStart = props.onCompositionStart,
      onCompositionEnd = props.onCompositionEnd,
      inputProps = _objectWithoutProperties(props, ["prefix", "suffix", "addonBefore", "addonAfter", "clearable", "defaultValue", "onPressEnter", "size", "wSize", "showCount", "style", "className", "bordered", "chineseCalc", "proportion", "maxLength", "onCompositionStart", "onCompositionEnd"]); // state


  var _React$useState = React.useState(defaultValue),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      inputValue = _React$useState2[0],
      setInputValue = _React$useState2[1];

  var _React$useState3 = React.useState(),
      _React$useState4 = _slicedToArray(_React$useState3, 2),
      inputFocused = _React$useState4[0],
      setInputFocused = _React$useState4[1];

  var _React$useContext = React.useContext(ConfigContext),
      getPrefixClassName = _React$useContext.getPrefixClassName,
      size = _React$useContext.size;

  var inputCls = getPrefixClassName('input');
  var inputRef = React.useRef(null);
  var compositingRef = React.useRef(false);
  var endSize = customSize || size;

  var getSizeSuffixCls = function getSizeSuffixCls() {
    if (endSize === 'small') return 'sm';
    if (endSize === 'large') return 'lg';
    return '';
  };

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

  var handleUpdateValue = function handleUpdateValue(evt, val, wordLen) {
    var _props$onChange;

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

    (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, evt, wordLen);
  };

  var handleChineseCalc = function handleChineseCalc(e) {
    var val = e.target.value;
    var wordLen = getWordLen(val, proportion, chineseCalc);

    if (maxLength && wordLen > maxLength) {
      var newVal = getChineseCalcValue(val, proportion, maxLength);
      var newWordLen = getWordLen(newVal, proportion, chineseCalc);
      e.target.value = newVal;
      e.currentTarget.value = newVal;
      return [newVal, newWordLen];
    }

    return [val, wordLen];
  };

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

  var handleCompositionEnd = function handleCompositionEnd(e) {
    compositingRef.current = false;

    if (chineseCalc) {
      var _handleChineseCalc = handleChineseCalc(e),
          _handleChineseCalc2 = _slicedToArray(_handleChineseCalc, 2),
          val = _handleChineseCalc2[0],
          wordLen = _handleChineseCalc2[1];

      handleUpdateValue(e, val, wordLen);
    }

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


  var handleFocus = function handleFocus(evt) {
    var _props$onFocus;

    setInputFocused(true);
    (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 ? void 0 : _props$onFocus.call(props, evt);
  };

  var handleBlur = function handleBlur(evt) {
    var _props$onBlur;

    setInputFocused(false);
    (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 ? void 0 : _props$onBlur.call(props, evt);
  };

  var handleClear = function handleClear(evt) {
    var _props$onChange2, _inputRef$current;

    setInputValue(''); // const originalInputValue = inputRef?.current?.value;

    var event = Object.create(evt);
    event.target = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
    event.currentTarget = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
    inputRef.current.value = '';
    (_props$onChange2 = props.onChange) === null || _props$onChange2 === void 0 ? void 0 : _props$onChange2.call(props, event, 0); // (inputRef.current as any).value = originalInputValue;

    inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
  };

  var handleKeyDown = function handleKeyDown(evt) {
    var _props$onPressEnter, _props$onKeyDown;

    if (evt.keyCode === 13) (_props$onPressEnter = props.onPressEnter) === null || _props$onPressEnter === void 0 ? void 0 : _props$onPressEnter.call(props, evt);
    (_props$onKeyDown = props.onKeyDown) === null || _props$onKeyDown === void 0 ? void 0 : _props$onKeyDown.call(props, evt);
  };

  var handleChange = function handleChange(evt) {
    var _evt$target;

    var val = (_evt$target = evt.target) === null || _evt$target === void 0 ? void 0 : _evt$target.value;

    if (!compositingRef.current && chineseCalc) {
      var _handleChineseCalc3 = handleChineseCalc(evt),
          _handleChineseCalc4 = _slicedToArray(_handleChineseCalc3, 2),
          calcVal = _handleChineseCalc4[0],
          calcLen = _handleChineseCalc4[1];

      handleUpdateValue(evt, calcVal, calcLen);
      return;
    } // 修复设置 value 的时候输入内容可以修改
    // if (typeof props.value === 'undefined') {
    //   setInputValue(val);
    // }
    // props.onChange?.(evt, wordLen);


    handleUpdateValue(evt, val, val.length);
  }; // render


  var hasPrefix = Boolean(props.prefix);
  var hasSuffix = Boolean(props.suffix);
  var hasAddonBefore = Boolean(props.addonBefore);
  var hasAddonAfter = Boolean(props.addonAfter);
  var hasAddonGroup = hasAddonBefore || hasAddonAfter;
  var sizeSuffixCls = getSizeSuffixCls();

  var renderClearBtn = function renderClearBtn() {
    // 仅当有内容且不为禁用状态下可用
    if (props.disabled) return null;
    var hiddenStyle;

    if (!inputValue) {
      hiddenStyle = {
        visibility: 'hidden'
      };
    }

    return /*#__PURE__*/React.createElement("span", {
      className: "".concat(inputCls, "-clear"),
      onClick: handleClear
    }, /*#__PURE__*/React.createElement(CloseFill, null));
  };

  var renderCount = function renderCount() {
    // const { maxLength } = props;
    var hasMaxLength = Number(maxLength) > 0;
    var countLength = getWordLen(inputValue, proportion, chineseCalc);
    var hasCountError = hasMaxLength ? countLength > Number(maxLength) : false; // showCount支持传入方法，自定义显示统计信息

    var countText = typeof showCount === 'function' ? showCount(countLength, maxLength) : countLength + (hasMaxLength ? "/".concat(maxLength) : '');
    return /*#__PURE__*/React.createElement("div", {
      className: cx("".concat(inputCls, "-count"), (inputFocused || inputValue) && "".concat(inputCls, "-count-show"), hasCountError && "".concat(inputCls, "-count-error"))
    }, countText);
  };

  var renderAffix = function renderAffix(fixKey) {
    var fixValue = props[fixKey];
    return /*#__PURE__*/React.createElement("div", {
      className: "".concat(inputCls, "-").concat(fixKey)
    }, fixValue);
  };

  var renderAddon = function renderAddon(addonKey) {
    var addonValue = props[addonKey];
    return /*#__PURE__*/React.createElement("span", {
      className: cx("".concat(inputCls, "-group-addon"), "".concat(inputCls, "-group-addon-text"))
    }, addonValue);
  };

  var renderInput = function renderInput() {
    var hasWidgth = hasPrefix || hasSuffix || showCount || clearable;
    return /*#__PURE__*/React.createElement("span", {
      className: cx(inputCls, sizeSuffixCls && "".concat(inputCls, "-").concat(sizeSuffixCls), props.disabled && "".concat(inputCls, "-disabled"), !props.disabled && inputFocused && bordered && "".concat(inputCls, "-focused"), hasWidgth && "".concat(inputCls, "-with-widget"), !hasAddonGroup && props.className, !bordered && "".concat(inputCls, "-border-less"), wSize && "".concat(inputCls, "-width-").concat(wSize)),
      style: hasAddonGroup ? undefined : props.style
    }, hasPrefix && renderAffix('prefix'), /*#__PURE__*/React.createElement("input", Object.assign({}, inputProps, {
      maxLength: maxLength,
      ref: composeRef(inputRef, ref),
      value: getControlledValue(inputValue),
      className: cx("".concat(inputCls, "-inner")),
      onKeyDown: handleKeyDown,
      onChange: handleChange,
      onFocus: handleFocus,
      onBlur: handleBlur,
      onCompositionStart: handleCompositionStart,
      onCompositionEnd: handleCompositionEnd
    })), clearable && renderClearBtn(), showCount && renderCount(), hasSuffix && renderAffix('suffix'));
  };

  if (!hasAddonGroup) return renderInput();
  return /*#__PURE__*/React.createElement("div", {
    className: cx("".concat(inputCls, "-group"), sizeSuffixCls && "".concat(inputCls, "-group-").concat(sizeSuffixCls), props.className),
    style: props.style
  }, hasAddonBefore && renderAddon('addonBefore'), renderInput(), hasAddonAfter && renderAddon('addonAfter'));
});
Input.displayName = 'Input';
Input.defaultProps = {
  // size: 'medium',
  type: 'text',
  disabled: false,
  clearable: false,
  bordered: true,
  chineseCalc: false,
  proportion: 2
};
export default Input;