import { defineComponent as N, useCssVars as v, useCssModule as E, ref as P, onMounted as V, watch as B, openBlock as a, createElementBlock as r, normalizeClass as g, unref as l, createElementVNode as A, Fragment as M, renderList as F, toDisplayString as p, createCommentVNode as f } from "vue";
import { _ as K } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const S = { class: "mb-3 flex gap-6" }, j = ["value", "onInput"], U = {
  key: 0,
  class: "mt-1 block whitespace-pre-line pr-6 text-center text-red-500",
  "data-test": "field-error"
}, L = {
  key: 1,
  class: "mt-1 block whitespace-pre-line pr-6 text-center text-green-500",
  "data-test": "field-success"
}, z = {
  key: 2,
  class: "mt-1 block whitespace-pre-line pr-6 text-center text-ice-700",
  "data-test": "field-hint"
}, G = /* @__PURE__ */ N({
  __name: "ConfirmationCodeInput",
  props: {
    digitCount: { default: 6 },
    errorText: { default: void 0 },
    successText: { default: void 0 },
    hintText: { default: void 0 },
    modelValue: { default: void 0 }
  },
  emits: ["update:model-value", "change", "focus", "blur"],
  setup(b, { emit: k }) {
    v((e) => ({
      v7837dce7: e.digitCount
    }));
    const c = E(), o = b, i = k, s = P([]);
    V(() => {
      var e;
      o.modelValue && (s.value = (e = o.modelValue) == null ? void 0 : e.split(""));
    });
    function T(e, t) {
      var n;
      s.value[t] = (n = e.target) == null ? void 0 : n.value, m(e), e.inputType === "deleteContentBackward" ? d(e) : (e.inputType === "insertText" || e.inputType === "deleteContentForward") && h(e);
    }
    function m(e) {
      const t = s.value.join("");
      i("update:model-value", t), i("change", { originalEvent: e, value: t });
    }
    function d(e) {
      const t = x(e.target);
      t && (t.focus(), t.select());
    }
    function h(e) {
      const t = _(e.target);
      t && (t.focus(), t.select());
    }
    function x(e) {
      const t = e.previousElementSibling;
      if (t)
        return t.nodeName === "INPUT" ? t : x(t);
    }
    function _(e) {
      const t = e.nextElementSibling;
      if (t)
        return t.nodeName === "INPUT" ? t : _(t);
    }
    function y(e) {
      e.target.select(), i("focus", e);
    }
    function C(e) {
      i("blur", e);
    }
    function w(e) {
      var t;
      if (!(e.ctrlKey || e.metaKey))
        switch (e.code) {
          case "ArrowLeft":
            d(e), e.preventDefault();
            break;
          case "ArrowUp":
          case "ArrowDown":
            e.preventDefault();
            break;
          case "Backspace":
            ((t = e.target) == null ? void 0 : t.value.length) === 0 && (d(e), e.preventDefault());
            break;
          case "ArrowRight":
            h(e), e.preventDefault();
            break;
          case "Enter":
          case "NumpadEnter":
          case "Tab":
            break;
          default:
            (!(e.code !== "Space" && Number(e.key) >= 0 && Number(e.key) <= 9) || s.value.join("").length >= o.digitCount && e.code !== "Delete") && e.preventDefault();
            break;
        }
    }
    function D(e) {
      var n;
      const t = (n = e.clipboardData) == null ? void 0 : n.getData("text");
      if (t != null && t.length) {
        const u = t == null ? void 0 : t.substring(0, o.digitCount), I = parseInt(u);
        isNaN(I) || (s.value = u.split(""), m(e));
      }
      e.preventDefault();
    }
    return B(
      () => o.modelValue,
      (e) => {
        s.value = e ? e.split("") : new Array(o.digitCount);
      }
    ), (e, t) => (a(), r("div", {
      class: g(["stash-confirmation-code-input inline-block", [l(c)["stash-confirmation-code-input-container"]]]),
      "data-test": "stash-confirmation-code-input"
    }, [
      A("div", S, [
        (a(!0), r(M, null, F(o.digitCount, (n) => (a(), r("input", {
          key: n,
          "data-test": "stash-confirmation-code-input__otp",
          class: g(["border bg-white p-2 text-center text-base font-medium text-ice-900 focus:border-blue-500", [
            l(c)["otp-code-input"],
            { [l(c)["has-error"]]: !!o.errorText },
            { [l(c)["has-success"]]: !!o.successText }
          ]]),
          type: "text",
          inputmode: "numeric",
          maxlength: "1",
          value: s.value[n - 1],
          pattern: "[0-9]",
          autocomplete: "one-time-code",
          onInput: (u) => T(u, n - 1),
          onKeydown: w,
          onPaste: D,
          onFocus: y,
          onBlur: C
        }, null, 42, j))), 128))
      ]),
      o.errorText ? (a(), r("small", U, p(o.errorText), 1)) : f("", !0),
      o.successText ? (a(), r("small", L, p(o.successText), 1)) : f("", !0),
      o.hintText ? (a(), r("small", z, p(o.hintText), 1)) : f("", !0)
    ], 2));
  }
}), Q = {
  "stash-confirmation-code-input-container": "_stash-confirmation-code-input-container_uPiu5",
  "otp-code-input": "_otp-code-input_9-2Dj",
  "has-error": "_has-error_dQn7k",
  "has-success": "_has-success_dGbI-"
}, R = {
  $style: Q
}, H = /* @__PURE__ */ K(G, [["__cssModules", R]]);
export {
  H as default
};
//# sourceMappingURL=ConfirmationCodeInput.js.map
