import React, { forwardRef, useContext, useEffect, useState, useRef, useImperativeHandle } from "react";
import classNames from "classnames";
import ConfigProviderContext from "../config-provider/ConfigProviderContext";
import { BORDER_LEFT, BORDER_SURROUND } from "../utils/constant";
import { addUnit } from "../utils";
import useUpdateEffect from "../hooks/use-update-effect";
const DEFAULT_CELL_LENGTH = 6;
const PasswordInput = /* @__PURE__ */ forwardRef((props, ref) => {
  const {
    prefixCls,
    createNamespace
  } = useContext(ConfigProviderContext);
  const [bem] = createNamespace("password-input", prefixCls);
  const rootRef = useRef(null);
  const nativeInputRef = useRef(null);
  const [inputValue, setInputValue] = useState(props.value);
  const {
    length,
    value,
    focused
  } = props;
  const info = props.errorInfo || props.info;
  const cellLength = length > 0 && length < Infinity ? Math.floor(length) : DEFAULT_CELL_LENGTH;
  useUpdateEffect(() => {
    if (["", void 0].includes(value)) {
      setInputValue("");
    }
    setInputValue(value.slice(0, cellLength));
  }, [value, cellLength]);
  useEffect(() => {
    var _a, _b;
    if (inputValue.length >= cellLength) {
      (_a = props.onFill) == null ? void 0 : _a.call(props, inputValue);
    }
    (_b = props.onChange) == null ? void 0 : _b.call(props, inputValue.slice(0, cellLength));
  }, [props.onChange, props.onFill, inputValue, cellLength]);
  const onFocus = () => {
    var _a, _b;
    if (!props.keyboard) {
      (_a = nativeInputRef.current) == null ? void 0 : _a.focus();
    }
    (_b = props.onFocus) == null ? void 0 : _b.call(props);
  };
  const onBlur = () => {
    var _a;
    (_a = props.onBlur) == null ? void 0 : _a.call(props);
  };
  useImperativeHandle(ref, () => ({
    focus: () => onFocus(),
    blur: () => {
      var _a;
      onBlur();
      (_a = nativeInputRef.current) == null ? void 0 : _a.blur();
    },
    resetValue: () => {
      setInputValue("");
    }
  }));
  const onTouchStart = (event) => {
    var _a;
    event.stopPropagation();
    (_a = props.onFocus) == null ? void 0 : _a.call(props);
  };
  const renderPoints = () => {
    const Points = [];
    const {
      mask,
      gutter
    } = props;
    for (let i = 0; i < length; i++) {
      const char = inputValue[i];
      const showBorder = i !== 0 && !gutter;
      const showCursor = focused && i === inputValue.length;
      let style;
      if (i !== 0 && gutter) {
        style = {
          marginLeft: addUnit(gutter)
        };
      }
      Points.push(/* @__PURE__ */ React.createElement("li", {
        key: i,
        className: classNames({
          [BORDER_LEFT]: showBorder
        }, bem("item", {
          focus: showCursor
        })),
        style
      }, mask ? /* @__PURE__ */ React.createElement("i", {
        style: {
          visibility: char ? "visible" : "hidden"
        }
      }) : char, showCursor && /* @__PURE__ */ React.createElement("div", {
        className: classNames(bem("cursor"))
      })));
    }
    return Points;
  };
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
    ref: rootRef,
    tabIndex: 0,
    onFocus,
    onBlur,
    className: classNames(bem())
  }, /* @__PURE__ */ React.createElement("ul", {
    className: classNames(bem("security"), {
      [BORDER_SURROUND]: !props.gutter
    }),
    onTouchStart
  }, renderPoints()), info && /* @__PURE__ */ React.createElement("div", {
    className: classNames(bem(props.errorInfo ? "error-info" : "info"))
  }, info), /* @__PURE__ */ React.createElement("input", {
    ref: nativeInputRef,
    className: classNames(bem("native-input")),
    value: inputValue,
    type: "text",
    pattern: "[0-9]*",
    inputMode: "numeric",
    onChange: (e) => {
      setInputValue(e.target.value.slice(0, props.length));
    }
  })), props.keyboard && /* @__PURE__ */ React.cloneElement(props.keyboard, {
    visible: focused,
    onInput: (v) => {
      if (inputValue.length < cellLength) {
        setInputValue((inputValue + v).slice(0, props.length));
      }
    },
    onDelete: () => {
      setInputValue(inputValue.slice(0, -1));
    },
    onClose: () => {
      var _a;
      (_a = rootRef.current) == null ? void 0 : _a.blur();
    },
    onBlur: () => {
      var _a;
      (_a = rootRef.current) == null ? void 0 : _a.blur();
    }
  }));
});
PasswordInput.defaultProps = {
  value: "",
  info: null,
  errorInfo: null,
  length: DEFAULT_CELL_LENGTH,
  gutter: 0,
  mask: true,
  focused: false,
  onChange: () => {
  }
};
var stdin_default = PasswordInput;
export {
  stdin_default as default
};
