"use strict";

exports.__esModule = true;
exports.default = void 0;

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

var _clsx3 = _interopRequireDefault(require("clsx"));

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

var _hooks = require("../hooks");

var _constant = require("../utils/constant");

var _ConfigProviderContext = _interopRequireDefault(require("../config-provider/ConfigProviderContext"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var PasswordInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
  var _clsx2;

  var _useContext = (0, _react.useContext)(_ConfigProviderContext.default),
      prefixCls = _useContext.prefixCls,
      createNamespace = _useContext.createNamespace;

  var _createNamespace = createNamespace('password-input', prefixCls),
      bem = _createNamespace[0];

  var innerEffect = (0, _react.useRef)(false);
  var inputRef = (0, _react.useRef)(null);

  var _useSetState = (0, _hooks.useSetState)({
    code: props.value || '',
    focused: props.autoFocus,
    inputType: props.type,
    inputMode: 'text'
  }),
      state = _useSetState[0],
      updateState = _useSetState[1];

  var codeArr = (0, _react.useMemo)(function () {
    var _state$code;

    return (_state$code = state.code) == null ? void 0 : _state$code.toString().split('');
  }, [state.code]);
  var cursorIndex = (0, _react.useMemo)(function () {
    return codeArr.length;
  }, [codeArr.length]);
  var length = props.length,
      onSubmit = props.onSubmit;

  var focus = function focus() {
    var _inputRef$current;

    (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
    updateState({
      focused: true
    });
  };

  var blur = function blur() {
    var _inputRef$current2;

    (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.blur();
    updateState({
      focused: false
    });
  };

  var clear = function clear() {
    updateState({
      code: ''
    });
  };

  var formatValue = function formatValue(val, callback) {
    var _val;

    if ((0, _utils.isDef)(length) && ((_val = val) == null ? void 0 : _val.length) > +length) {
      val = val.slice(0, length);
    }

    if (props.type === 'number') {
      val = (0, _utils.formatNumber)(val, false, false);
    }

    if ((0, _utils.isFunction)(props.validator)) {
      if (props.validator(val)) {
        updateState({
          code: val
        });
        if ((0, _utils.isFunction)(callback)) callback(val);
      }
    } else {
      updateState({
        code: val
      });
      if ((0, _utils.isFunction)(callback)) callback(val);
    }
  };

  var handleChange = function handleChange(e) {
    var val = e.target.value || '';
    innerEffect.current = true;
    formatValue(val, props.onChange);
  };

  var renderPoints = function renderPoints() {
    var Points = [];
    var mask = props.mask,
        gutter = props.gutter; // eslint-disable-next-line no-plusplus

    for (var i = 0; i < length; i++) {
      var _clsx;

      var _char = codeArr[i];
      var showBorder = i !== 0 && !gutter;
      var showCursor = state.focused && cursorIndex === i && !_char;
      var style = void 0;

      if (i !== 0 && gutter) {
        style = {
          marginLeft: (0, _utils.addUnit)(gutter)
        };
      }

      Points.push( /*#__PURE__*/_react.default.createElement("li", {
        key: i,
        className: (0, _clsx3.default)((_clsx = {}, _clsx[_constant.BORDER_LEFT] = showBorder, _clsx[props.highlightClass] = props.highlightClass && _char && !props.mask, _clsx), bem('item', {
          focus: showCursor
        })),
        style: style
      }, mask ? /*#__PURE__*/_react.default.createElement("i", {
        style: {
          visibility: _char ? 'visible' : 'hidden'
        }
      }) : _char, showCursor && /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _clsx3.default)(bem('cursor'))
      })));
    }

    return Points;
  };

  (0, _hooks.useUpdateEffect)(function () {
    var _props$value;

    if (innerEffect.current) {
      innerEffect.current = false;
      return;
    }

    formatValue((_props$value = props.value) != null ? _props$value : '');
  }, [props.value]);
  (0, _react.useEffect)(function () {
    if (state.code.length >= length) {
      var _inputRef$current3;

      inputRef == null ? void 0 : (_inputRef$current3 = inputRef.current) == null ? void 0 : _inputRef$current3.blur == null ? void 0 : _inputRef$current3.blur();
      onSubmit == null ? void 0 : onSubmit(state.code);
    } // eslint-disable-next-line react-hooks/exhaustive-deps

  }, [length, state.code]);
  (0, _hooks.useUpdateEffect)(function () {
    if (props.type === 'number') {
      updateState({
        inputType: 'tel',
        inputMode: 'numeric'
      });
    } else {
      updateState({
        inputType: 'text'
      });
    }
  }, [props.type]);
  (0, _react.useImperativeHandle)(ref, function () {
    return {
      focus: focus,
      blur: blur,
      clear: clear
    };
  });
  var info = props.errorInfo || props.info;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _clsx3.default)(bem(), props.className),
    style: props.style
  }, /*#__PURE__*/_react.default.createElement("ul", {
    className: (0, _clsx3.default)(bem('security'), (_clsx2 = {}, _clsx2[_constant.BORDER_SURROUND] = !props.gutter, _clsx2))
  }, renderPoints(), /*#__PURE__*/_react.default.createElement("input", {
    ref: inputRef,
    type: state.inputType,
    inputMode: state.inputMode,
    pattern: "[0-9]*",
    maxLength: props.length,
    value: state.code,
    autoComplete: "false",
    autoCorrect: "off",
    autoCapitalize: "off" // eslint-disable-next-line jsx-a11y/no-autofocus
    ,
    autoFocus: props.autoFocus,
    spellCheck: "false",
    onChange: handleChange,
    onFocus: function onFocus(e) {
      updateState({
        focused: true
      });
      props.onFocus == null ? void 0 : props.onFocus(e);
    },
    onBlur: function onBlur(e) {
      updateState({
        focused: false
      });
      props.onBlur == null ? void 0 : props.onBlur(e);
    }
  })), info ? /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _clsx3.default)(bem(props.errorInfo ? 'error-info' : 'info'))
  }, info) : null);
});
PasswordInput.defaultProps = {
  length: 6,
  gutter: 0,
  mask: true,
  type: 'text'
};
var _default = PasswordInput;
exports.default = _default;