import l, { useState as c, useRef as x, useEffect as g } from "react";
import { EditableTextHelper as I } from "./lib/helper.es.es.js";
import { FOCUS_VISIBLE_STYLE as L } from "../../utilities/focusStyle.es.es.js";
import { merge as n } from "../../utilities/merge.es.es.js";
const A = ({
  onEditableSave: p,
  onModeChange: a,
  onAdditionalValueSave: v,
  children: r,
  options: e,
  isOverflowing: s = !1
}) => {
  const i = I.getLabel(r), [f, E] = c(i), [o, d] = c("LABEL"), [y, N] = c(), u = x(null), S = (t) => E(t.target.value), b = (t) => {
    d("LABEL"), a && a("LABEL"), (e == null ? void 0 : e.additionalValues) && v && v(e.additionalValues, t.target.value), p && p(t.target.value);
  }, w = (t) => () => {
    E(t), d("INPUT"), a && a("INPUT");
  }, B = (t) => {
    t.key === "Enter" && b(t);
  }, P = (t) => b(t);
  g(() => {
    var t;
    return d((t = e == null ? void 0 : e.mode) != null ? t : "LABEL");
  }, [e == null ? void 0 : e.mode]);
  const T = e != null && e.enableDoubleClick ? {
    onDoubleClick: w(i),
    onKeyPress: (t) => t.key === "Enter" && w(i)()
  } : {
    onClick: w(i)
  };
  g(() => {
    var t;
    m.current && N(I.copyStyles(m.current)), o === "INPUT" && ((t = u.current) == null || t.select());
  }, [o, u, r]);
  const m = x(), k = r && l.cloneElement(r, {
    ref: m
  });
  return /* @__PURE__ */ l.createElement("div", {
    "data-test-id": "editable-node-container",
    className: n(["tw-relative tw-h-full", (e == null ? void 0 : e.removeBoxPadding) === !0 ? "" : "tw-p-2"])
  }, o === "INPUT" ? /* @__PURE__ */ l.createElement("div", {
    className: n([
      "tw-flex tw-items-center",
      (e == null ? void 0 : e.isSlimInputField) === !0 ? "-tw-translate-x-[0.315rem] -tw-translate-y-[0.07rem]" : "-tw-translate-x-[0.81rem] -tw-translate-y-[0.56rem]"
    ])
  }, /* @__PURE__ */ l.createElement("div", {
    "data-test-id": "editable-input",
    className: n(["tw-relative", s && "tw-w-full tw-flex tw-items-center"])
  }, /* @__PURE__ */ l.createElement("input", {
    ref: u,
    type: "text",
    className: n([
      (e == null ? void 0 : e.isSlimInputField) === !0 ? "focus-visible:tw-outline-none" : L,
      "tw-absolute tw-w-full tw-text-text tw-border tw-rounded tw-bg-base tw-border-solid",
      (e == null ? void 0 : e.isSlimInputField) === !0 ? "tw-py-0 tw-px-1" : "tw-px-3 tw-py-2"
    ]),
    style: y,
    value: f,
    onChange: S,
    onKeyDown: B,
    onBlur: P
  }), /* @__PURE__ */ l.createElement("span", {
    "aria-hidden": "true",
    className: n([
      "tw-rounded tw-px-4 tw-py-2 tw-bg-base tw-truncate",
      (e == null ? void 0 : e.isSlimInputField) === !0 && "tw-py-0 tw-px-2",
      s && "tw-w-0"
    ]),
    style: y
  }, f))) : /* @__PURE__ */ l.createElement(l.Fragment, null), /* @__PURE__ */ l.createElement("button", {
    style: { display: o === "INPUT" ? "none" : "flex" },
    className: n([s && "tw-w-full", "tw-h-full tw-items-center", L]),
    ...T,
    "data-test-id": "node-link-name",
    "aria-pressed": "false"
  }, k));
};
export {
  A as EditableText
};
//# sourceMappingURL=EditableText.es.es.js.map
