"use strict";

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

function _react() {
  const data = _interopRequireWildcard(require("react"));

  _react = function () {
    return data;
  };

  return data;
}

function _jsxRuntime() {
  const data = require("react/jsx-runtime");

  _jsxRuntime = function () {
    return data;
  };

  return data;
}

function _clsx() {
  const data = _interopRequireDefault(require("clsx"));

  _clsx = function () {
    return data;
  };

  return data;
}

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 (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; }

const PasswordInput = (0, _react().forwardRef)((props, ref) => {
  const {
    prefixCls,
    createNamespace
  } = (0, _react().useContext)(_ConfigProviderContext.default);
  const [bem] = createNamespace('password-input', prefixCls);
  const innerEffect = (0, _react().useRef)(false);
  const inputRef = (0, _react().useRef)(null);
  const [state, updateState] = (0, _hooks.useSetState)({
    code: props.value || '',
    focused: props.autoFocus,
    inputType: props.type,
    inputMode: 'text'
  });
  const codeArr = (0, _react().useMemo)(() => {
    var _a;

    return (_a = state.code) === null || _a === void 0 ? void 0 : _a.toString().split('');
  }, [state.code]);
  const cursorIndex = (0, _react().useMemo)(() => codeArr.length, [codeArr.length]);
  const {
    length,
    onSubmit
  } = props;

  const focus = () => {
    var _a;

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

  const blur = () => {
    var _a;

    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
    updateState({
      focused: false
    });
  };

  const clear = () => {
    updateState({
      code: ''
    });
  };

  const formatValue = (val, callback) => {
    if ((0, _utils.isDef)(length) && (val === null || val === void 0 ? 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);
    }
  };

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

  const renderPoints = () => {
    const Points = [];
    const {
      mask,
      gutter
    } = props; // eslint-disable-next-line no-plusplus

    for (let i = 0; i < length; i++) {
      const char = codeArr[i];
      const showBorder = i !== 0 && !gutter;
      const showCursor = state.focused && cursorIndex === i && !char;
      let style;

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

      Points.push((0, _jsxRuntime().jsxs)("li", Object.assign({
        className: (0, _clsx().default)({
          [_constant.BORDER_LEFT]: showBorder,
          [props.highlightClass]: props.highlightClass && char && !props.mask
        }, bem('item', {
          focus: showCursor
        })),
        style: style
      }, {
        children: [mask ? (0, _jsxRuntime().jsx)("i", {
          style: {
            visibility: char ? 'visible' : 'hidden'
          }
        }) : char, showCursor && (0, _jsxRuntime().jsx)("div", {
          className: (0, _clsx().default)(bem('cursor'))
        })]
      }), i));
    }

    return Points;
  };

  (0, _hooks.useUpdateEffect)(() => {
    var _a;

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

    formatValue((_a = props.value) !== null && _a !== void 0 ? _a : '');
  }, [props.value]);
  (0, _react().useEffect)(() => {
    var _a, _b;

    if (state.code.length >= length) {
      (_b = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.blur) === null || _b === void 0 ? void 0 : _b.call(_a);
      onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(state.code);
    } // eslint-disable-next-line react-hooks/exhaustive-deps

  }, [length, state.code]);
  (0, _hooks.useUpdateEffect)(() => {
    if (props.type === 'number') {
      updateState({
        inputType: 'tel',
        inputMode: 'numeric'
      });
    } else {
      updateState({
        inputType: 'text'
      });
    }
  }, [props.type]);
  (0, _react().useImperativeHandle)(ref, () => ({
    focus,
    blur,
    clear
  }));
  const info = props.errorInfo || props.info;
  return (0, _jsxRuntime().jsxs)("div", Object.assign({
    className: (0, _clsx().default)(bem(), props.className),
    style: props.style
  }, {
    children: [(0, _jsxRuntime().jsxs)("ul", Object.assign({
      className: (0, _clsx().default)(bem('security'), {
        [_constant.BORDER_SURROUND]: !props.gutter
      })
    }, {
      children: [renderPoints(), (0, _jsxRuntime().jsx)("input", {
        ref: inputRef,
        type: state.inputType,
        inputMode: state.inputMode,
        pattern: "[0-9]*",
        maxLength: props.length,
        value: state.code,
        autoComplete: "false",
        autoCorrect: "off",
        autoCapitalize: "off",
        autoFocus: props.autoFocus,
        spellCheck: "false",
        onChange: handleChange,
        onFocus: e => {
          var _a;

          updateState({
            focused: true
          });
          (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
        },
        onBlur: e => {
          var _a;

          updateState({
            focused: false
          });
          (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
        }
      })]
    })), info ? (0, _jsxRuntime().jsx)("div", Object.assign({
      className: (0, _clsx().default)(bem(props.errorInfo ? 'error-info' : 'info'))
    }, {
      children: info
    })) : null]
  }));
});
PasswordInput.defaultProps = {
  length: 6,
  gutter: 0,
  mask: true,
  type: 'text'
};
var _default = PasswordInput;
exports.default = _default;