import { jsxs as T, jsx as e } from "react/jsx-runtime";
import { useState as l, useRef as x, useEffect as ne } from "react";
import { isEmpty as ae } from "es-toolkit/compat";
import { noop as b } from "es-toolkit/function";
import f from "../../utils/classNames.js";
import se from "../button/Button.js";
import re from "../../hooks/useKey.js";
import oe from "../../hooks/useEsc.js";
const le = "primary", ie = (c) => {
  const n = x(null);
  return ne(() => {
    n.current && c && n.current.focus();
  }, [n.current, c]), n;
}, ve = (c) => {
  const {
    placeholder: n,
    fixedPreviousValue: m = "",
    previousValue: P = "",
    value: i = "",
    isValid: a = !0,
    errorMessage: E,
    hideErrorIcon: I = !1,
    onValueChanged: R = b,
    onInputChange: N,
    onEsc: S = b,
    onEnterEdit: z = b,
    buttonStyle: U = le,
    inputClassName: j,
    inputProps: w,
    icon: h,
    unit: y,
    disabled: D = !1,
    className: L,
    ..._
  } = c, u = P || m, [s, g] = l(i), [r, v] = l(u), [t, V] = l(!1), [C, O] = l(!1), p = x(s), k = x(r), [A, K] = l(i);
  A !== i && (g(i), K(i));
  const [M, Y] = l(u);
  M !== u && (v(u), Y(u));
  const $ = ie(t);
  re((o) => {
    C && t && a && o.key === "Enter" && B();
  }), oe(() => {
    C && (g(p.current), v(k.current), V(!1), S());
  });
  const B = () => {
    t === !1 ? (V(!0), m || (k.current = r), p.current = s, z()) : (V(!1), p.current !== s && (v(m || p.current), R(s, r)));
  }, q = (o) => {
    if (N) {
      const ee = o.nativeEvent?.data, te = o.target.value;
      N(ee ?? te, o.currentTarget.value);
      return;
    }
    g(o.target.value);
  }, G = () => O(!0), H = () => O(!1), F = !ae(r) && r !== s && !t, d = !!y, J = f("form-group", !a && "has-feedback has-error", L), Q = f(
    "form-control",
    F && "padding-bottom-0 padding-top-10 text-size-12",
    d && "padding-right-50",
    // This value is not perfect as with longer units it might conflict with the value
    !d && !a && I && "padding-right-10",
    // remove the padding for the error icon if not needed
    j
  ), W = f(
    "position-absolute",
    "top-2",
    "left-10",
    "margin-left-3",
    "text-size-10",
    "text-decoration-line-through",
    h && "padding-left-20"
  ), X = f("rioglyph", t ? "rioglyph-ok" : "rioglyph-pencil"), Z = t && !a || D;
  return /* @__PURE__ */ T("div", { ..._, className: J, children: [
    /* @__PURE__ */ T("div", { className: "input-group", children: [
      h && /* @__PURE__ */ e("span", { className: "input-group-addon", children: /* @__PURE__ */ e("span", { className: `rioglyph ${h}`, "aria-hidden": "true", "aria-label": "input icon" }) }),
      /* @__PURE__ */ e(
        "input",
        {
          type: "text",
          ref: $,
          placeholder: n,
          className: Q,
          value: s,
          onChange: q,
          onFocus: G,
          onBlur: H,
          disabled: !t,
          ...w
        }
      ),
      d && /* @__PURE__ */ e("div", { className: "position-absolute right-0 margin-right-50", "aria-label": "unit", children: y }),
      F && /* @__PURE__ */ e("div", { className: W, "aria-label": "previous value", children: r }),
      /* @__PURE__ */ e("div", { className: "input-group-btn", children: /* @__PURE__ */ e(se, { bsStyle: U, iconOnly: !0, onClick: B, disabled: Z, children: /* @__PURE__ */ e("span", { className: X }) }) })
    ] }),
    !a && !I && !d && /* @__PURE__ */ e("span", { className: "right-25 margin-right-10 form-control-feedback rioglyph rioglyph-error-sign" }),
    !a && E && /* @__PURE__ */ e("span", { className: "help-block z-index-max", children: /* @__PURE__ */ e("span", { children: E }) })
  ] });
};
export {
  ve as default
};
//# sourceMappingURL=SaveableInput.js.map
