var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/pro/Login2.0/steps/CodeInput.tsx
var CodeInput_exports = {};
__export(CodeInput_exports, {
  default: () => CodeInput_default
});
module.exports = __toCommonJS(CodeInput_exports);
var import_react = __toESM(require("react"));
var import_materials = require("@pisell/materials");
var import_utils = require("@pisell/utils");
var import_iconfont = __toESM(require("@pisell/materials/src/components/iconfont"));
function formatDisplayAccount(account) {
  if (!account) return "";
  if (typeof account === "string") return account;
  return `+${account.country_calling_code}${account.phone}`;
}
function CodeInput({
  flowData,
  codeLength = 4,
  onSubmit,
  onResend,
  onBack,
  countdown = 0,
  loading = false,
  error,
  onClearError
}) {
  const [code, setCode] = (0, import_react.useState)(Array(codeLength).fill(""));
  const inputRefs = (0, import_react.useRef)([]);
  const canResend = countdown === 0;
  (0, import_react.useEffect)(() => {
    var _a;
    (_a = inputRefs.current[0]) == null ? void 0 : _a.focus();
  }, []);
  (0, import_react.useEffect)(() => {
    var _a;
    if (error) {
      setCode(Array(codeLength).fill(""));
      (_a = inputRefs.current[0]) == null ? void 0 : _a.focus();
    }
  }, [error, codeLength]);
  const handleInputChange = (index, value) => {
    var _a, _b;
    const digitsOnly = value.replace(/\D/g, "");
    if (digitsOnly !== value && value !== "") return;
    if (digitsOnly.length > 1) {
      if (error && onClearError) onClearError();
      const nextCode = [...code];
      const maxFillLength = Math.min(codeLength - index, digitsOnly.length);
      for (let offset = 0; offset < maxFillLength; offset += 1) {
        nextCode[index + offset] = digitsOnly[offset];
      }
      setCode(nextCode);
      const nextEmptyIndex = nextCode.findIndex((digit) => digit === "");
      if (nextEmptyIndex === -1) {
        onSubmit == null ? void 0 : onSubmit(nextCode.join(""));
        return;
      }
      (_a = inputRefs.current[nextEmptyIndex]) == null ? void 0 : _a.focus();
      return;
    }
    if (value && error && onClearError) {
      onClearError();
    }
    const newCode = [...code];
    newCode[index] = value.slice(-1);
    setCode(newCode);
    if (value && index < codeLength - 1) {
      (_b = inputRefs.current[index + 1]) == null ? void 0 : _b.focus();
    }
    if (newCode.every((digit) => digit !== "")) {
      const fullCode = newCode.join("");
      onSubmit == null ? void 0 : onSubmit(fullCode);
    }
  };
  const handleKeyDown = (index, e) => {
    var _a;
    if (e.key === "Backspace" && !code[index] && index > 0) {
      (_a = inputRefs.current[index - 1]) == null ? void 0 : _a.focus();
    }
  };
  const handlePaste = (e) => {
    e.preventDefault();
    const pastedData = e.clipboardData.getData("text").trim();
    if (!/^\d+$/.test(pastedData)) return;
    if (pastedData && error && onClearError) {
      onClearError();
    }
    const newCode = pastedData.slice(0, codeLength).split("");
    while (newCode.length < codeLength) {
      newCode.push("");
    }
    setCode(newCode);
    if (newCode.every((digit) => digit !== "")) {
      onSubmit == null ? void 0 : onSubmit(newCode.join(""));
    }
  };
  const handleSubmit = () => {
    const fullCode = code.join("");
    if (fullCode.length === codeLength) {
      onSubmit == null ? void 0 : onSubmit(fullCode);
    }
  };
  const title = flowData.accountType === "email" ? import_utils.locales.getText("pisell-register2-check-email-title") : import_utils.locales.getText("pisell-register2-check-phone-title");
  const description = flowData.accountType === "email" ? import_utils.locales.getText("pisell-register2-check-email-desc") : import_utils.locales.getText("pisell-register2-check-phone-desc");
  const displayAccount = formatDisplayAccount(flowData.account);
  const noReceiveText = flowData.accountType === "email" ? import_utils.locales.getText("pisell-register2-no-email-received") : import_utils.locales.getText("pisell-register2-no-message-received");
  return /* @__PURE__ */ import_react.default.createElement("div", { className: "register-step-container code-input-page" }, /* @__PURE__ */ import_react.default.createElement("button", { className: "back-button-top", onClick: onBack, "aria-label": "Go back" }, /* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { type: "pisell2-arrow-left" })), /* @__PURE__ */ import_react.default.createElement("div", { className: "register-step-content" }, /* @__PURE__ */ import_react.default.createElement("h2", { className: "register-step-title" }, title), /* @__PURE__ */ import_react.default.createElement("p", { className: "register-step-desc" }, description, /* @__PURE__ */ import_react.default.createElement("br", null), displayAccount), /* @__PURE__ */ import_react.default.createElement("div", { className: "code-input-group", onPaste: handlePaste }, code.map((digit, index) => /* @__PURE__ */ import_react.default.createElement(
    "input",
    {
      key: index,
      ref: (el) => inputRefs.current[index] = el,
      type: "text",
      inputMode: "numeric",
      autoComplete: index === 0 ? "one-time-code" : "off",
      autoCorrect: "off",
      autoCapitalize: "off",
      spellCheck: false,
      maxLength: index === 0 ? codeLength : 1,
      pattern: "[0-9]*",
      className: `code-input-box ${digit ? "has-value" : ""} ${error ? "has-error" : ""}`,
      value: digit,
      onChange: (e) => handleInputChange(index, e.target.value),
      onKeyDown: (e) => handleKeyDown(index, e),
      disabled: loading
    }
  ))), error && /* @__PURE__ */ import_react.default.createElement("div", { className: "code-input-error" }, error), /* @__PURE__ */ import_react.default.createElement(
    import_materials.Button,
    {
      type: "primary",
      size: "large",
      block: true,
      onClick: handleSubmit,
      loading,
      disabled: code.some((digit) => !digit),
      className: "register-submit-btn"
    },
    import_utils.locales.getText("pisell-common-verify")
  ), /* @__PURE__ */ import_react.default.createElement(
    import_materials.Button,
    {
      type: "default",
      size: "large",
      block: true,
      onClick: onBack,
      className: "register-back-btn"
    },
    import_utils.locales.getText("pisell-common-back")
  ), /* @__PURE__ */ import_react.default.createElement("div", { className: "register-resend-section" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "resend-text" }, noReceiveText, " "), /* @__PURE__ */ import_react.default.createElement(
    "button",
    {
      className: "resend-link",
      onClick: onResend,
      disabled: !canResend
    },
    import_utils.locales.getText("pisell-common-resend"),
    countdown > 0 && ` (${countdown} s)`
  ))));
}
var CodeInput_default = CodeInput;
