"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

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

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

var _bem = require("@zarm-design/bem");

var _icons = require("@zarm-design/icons");

var _ahooks = require("ahooks");

var React = _interopRequireWildcard(require("react"));

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

var _keyboardPicker = _interopRequireDefault(require("../keyboard-picker"));

var _useClickAway = _interopRequireDefault(require("../use-click-away"));

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

var CustomInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var _ref;

  var type = props.type,
      clearable = props.clearable,
      readOnly = props.readOnly,
      autoFocus = props.autoFocus,
      className = props.className,
      disabled = props.disabled,
      maxLength = props.maxLength,
      label = props.label,
      _props$defaultValue = props.defaultValue,
      defaultValue = _props$defaultValue === void 0 ? '' : _props$defaultValue,
      onChange = props.onChange,
      onBlur = props.onBlur,
      onFocus = props.onFocus,
      placeholder = props.placeholder,
      restProps = (0, _objectWithoutProperties2.default)(props, ["type", "clearable", "readOnly", "autoFocus", "className", "disabled", "maxLength", "label", "defaultValue", "onChange", "onBlur", "onFocus", "placeholder"]);
  var contentRef = React.useRef(null);
  var pickerRef = React.useRef(null);
  var inputRef = React.useRef(null);

  var _useControllableValue = (0, _ahooks.useControllableValue)(_objectSpread(_objectSpread({}, props), {}, {
    defaultValue: defaultValue
  })),
      _useControllableValue2 = (0, _slicedToArray2.default)(_useControllableValue, 2),
      value = _useControllableValue2[0],
      setValue = _useControllableValue2[1];

  var _React$useState = React.useState(autoFocus),
      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
      focused = _React$useState2[0],
      setFocused = _React$useState2[1];

  var showClearIcon = clearable && typeof value !== 'undefined' && (value === null || value === void 0 ? void 0 : value.length) > 0;

  var _React$useContext = React.useContext(_configProvider.ConfigContext),
      prefixCls = _React$useContext.prefixCls;

  var bem = (0, _bem.createBEM)('custom-input', {
    prefixCls: prefixCls
  });
  var cls = bem([(_ref = {}, (0, _defineProperty2.default)(_ref, "".concat(type), true), (0, _defineProperty2.default)(_ref, "disabled", disabled), (0, _defineProperty2.default)(_ref, "focus", focused), (0, _defineProperty2.default)(_ref, "clearable", showClearIcon), (0, _defineProperty2.default)(_ref, "readonly", readOnly), _ref), className]);

  var onInputFocus = function onInputFocus() {
    if (disabled) return;
    window.setTimeout(function () {
      setFocused(true);
    }, 0);
    onFocus === null || onFocus === void 0 ? void 0 : onFocus(value);
  };

  var onInputBlur = function onInputBlur() {
    setFocused(false);
    onBlur === null || onBlur === void 0 ? void 0 : onBlur(value);
  };

  var onKeyClick = function onKeyClick(key) {
    if (['close', 'ok'].indexOf(key) > -1) {
      onInputBlur();
      return;
    }

    if (key !== 'delete' && (value === null || value === void 0 ? void 0 : value.length) >= maxLength) {
      return;
    }

    var newValue = key === 'delete' ? value === null || value === void 0 ? void 0 : value.slice(0, (value === null || value === void 0 ? void 0 : value.length) - 1) : value + key;

    if (typeof value === 'undefined') {
      setValue(newValue);
    }

    setValue === null || setValue === void 0 ? void 0 : setValue(newValue);
  };

  var onInputClear = function onInputClear(e) {
    e.stopPropagation();
    setValue('');
  };

  var scrollToStart = function scrollToStart() {
    contentRef.current.scrollLeft = 0;
  };

  var scrollToEnd = function scrollToEnd() {
    contentRef.current.scrollLeft = contentRef.current.scrollWidth;
  };

  var focus = function focus() {
    onInputFocus();
  };

  var blur = function blur() {
    onInputBlur();
  }; // 渲染标签栏


  var labelRender = !!label && /*#__PURE__*/React.createElement("div", {
    className: bem('label')
  }, label);
  var clearIconRender = showClearIcon && /*#__PURE__*/React.createElement(_icons.CloseCircleFill, {
    className: bem('clear'),
    onClick: onInputClear
  });
  var textRender = /*#__PURE__*/React.createElement("div", {
    className: bem('content')
  }, value);
  var inputRender = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: bem('content'),
    onClick: onInputFocus
  }, (value === undefined || value === '') && !readOnly && /*#__PURE__*/React.createElement("div", {
    className: bem('placeholder')
  }, placeholder), /*#__PURE__*/React.createElement("div", {
    ref: contentRef,
    className: bem('virtual-input')
  }, value), /*#__PURE__*/React.createElement("input", {
    ref: inputRef,
    type: "hidden",
    value: value
  })), clearIconRender, /*#__PURE__*/React.createElement(_keyboardPicker.default, {
    ref: pickerRef,
    visible: focused,
    type: type,
    onKeyClick: onKeyClick
  }));
  (0, _useClickAway.default)([contentRef, pickerRef], onInputBlur);
  React.useImperativeHandle(ref, function () {
    return {
      focus: focus,
      blur: blur
    };
  });
  React.useEffect(function () {
    if (!focused) return;
    var timeout = window.setTimeout(function () {
      var _contentRef$current;

      (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.scrollIntoView({
        block: 'center',
        inline: 'center',
        behavior: 'smooth'
      });
    }, 0);
    return function () {
      window.clearTimeout(timeout);
    };
  }, [focused]);
  React.useEffect(function () {
    if (readOnly) return;

    if (focused) {
      scrollToEnd();
    } else {
      scrollToStart();
    }
  }, [readOnly, focused, value]);
  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
    className: cls
  }), labelRender, readOnly ? textRender : inputRender);
});
CustomInput.displayName = 'CustomInput';
CustomInput.defaultProps = {
  type: 'number'
};
var _default = CustomInput;
exports.default = _default;