import { jsxs as c, Fragment as re, jsx as o } from "react/jsx-runtime";
import { useState as s, useRef as ie, useEffect as le, useMemo as ce } from "react";
import { noop as r } from "es-toolkit/function";
import { usePopper as pe } from "react-popper";
import { createPortal as de } from "react-dom";
import p from "../../utils/classNames.js";
import { getOrCreatePortalRoot as fe } from "../../utils/portalRoot.js";
import ue from "../../hooks/useEsc.js";
import me from "../../hooks/useFocusTrap.js";
const Ee = -13, he = -18, O = 1, we = (P) => {
  const {
    show: t,
    onSave: S = r,
    onCancel: w = r,
    onFocus: M = r,
    onBlur: R = r,
    onEditMode: F = r,
    onSaveValidation: T = () => !0,
    isValid: n = !0,
    errorMessage: V,
    allowResize: k = !1,
    inputRows: m = O,
    editorOffsetTop: I = 0,
    editorOffsetLeft: _ = 0,
    customEditor: E,
    size: d = "md",
    className: W = "",
    inputClassName: z = "",
    editorClassName: D = "",
    children: A,
    ...L
  } = P, [i, l] = s(t), [f, h] = s(""), [b, u] = s(!n), [C, j] = s(null), [g, K] = s(null), y = !!E;
  ue(() => N()), me(g);
  const a = ie(null);
  le(() => {
    a.current && i && (a.current?.focus(), a.current?.select());
  }, [i, a.current]);
  const $ = {
    placement: "bottom-start",
    modifiers: [ce(
      () => ({
        name: "offset",
        options: {
          offset: ({ reference: e }) => {
            const ne = he + _, ae = -(e.height - (Ee + I));
            return [ne, ae];
          }
        }
      }),
      []
    )],
    strategy: "absolute"
  }, { styles: B, attributes: H } = pe(C, g, $), U = () => {
    t === void 0 && v(), F();
  }, v = () => {
    l(!0), h(C?.textContent?.trimEnd() ?? ""), u(!1);
  }, X = (e) => {
    h(e.target.value);
  }, q = (e) => {
    e.key === "Enter" && m === O && (e.preventDefault(), x());
  }, N = () => {
    l(!1), w();
  }, x = () => {
    const e = T(f);
    u(!e), e && (l(!1), S(f.trimEnd()));
  }, [G, J] = s(t);
  t !== G && (t && v(), t || l(!1), J(t));
  const [Q, Y] = s(n);
  n !== Q && (u(!n), Y(n));
  const Z = p(W, i && "opacity-0"), ee = p(
    "EditableContentEditor",
    "display-flex gap-5",
    "padding-5",
    "rounded",
    "shadow-accent",
    "z-index-max",
    "bg-white",
    D
  ), te = p(
    "display-flex flex-column gap-5",
    "margin-0",
    "form-group",
    b && "has-feedback has-error"
  ), oe = p("form-control", d === "lg" && "input-lg", z), se = {
    minWidth: "100px",
    resize: k ? "vertical" : "none"
  };
  return /* @__PURE__ */ c(re, { children: [
    /* @__PURE__ */ o("span", { ref: j, onClick: U, className: Z, children: A }),
    i && de(
      /* @__PURE__ */ c(
        "div",
        {
          className: ee,
          onClick: (e) => e.stopPropagation(),
          ref: K,
          style: B.popper,
          ...H.popper,
          ...L,
          children: [
            /* @__PURE__ */ c("div", { className: te, children: [
              y && E,
              !y && /* @__PURE__ */ o(
                "textarea",
                {
                  ref: a,
                  className: oe,
                  value: f,
                  onChange: X,
                  onFocus: M,
                  onBlur: R,
                  onKeyDown: q,
                  style: se,
                  rows: m
                }
              ),
              b && /* @__PURE__ */ o("div", { className: "help-block position-relative", children: V })
            ] }),
            /* @__PURE__ */ c("div", { className: "display-flex gap-5", children: [
              /* @__PURE__ */ o(
                "button",
                {
                  type: "button",
                  onClick: N,
                  className: `EditableContentCancel btn btn-default btn-icon-only btn-${d}`,
                  "aria-label": "EditableContent cancel button",
                  "data-testid": "EditableContentCancel",
                  children: /* @__PURE__ */ o("span", { className: "rioglyph rioglyph-remove" })
                }
              ),
              /* @__PURE__ */ o(
                "button",
                {
                  type: "button",
                  onClick: x,
                  className: `EditableContentSave btn btn-primary btn-icon-only btn-${d}`,
                  "aria-label": "EditableContent save button",
                  "data-testid": "EditableContentSave",
                  children: /* @__PURE__ */ o("span", { className: "rioglyph rioglyph-ok" })
                }
              )
            ] })
          ]
        }
      ),
      fe()
    )
  ] });
};
export {
  we as default
};
//# sourceMappingURL=EditableContent.js.map
