import e, { useState as E, useRef as H, useLayoutEffect as Y } from "react";
import { merge as c } from "../../utilities/merge.es.es.js";
import { DropZone as D } from "../DropZone/DropZone.es.es.js";
import { EditableText as G } from "../EditableText/EditableText.es.es.js";
import { Tooltip as J, TooltipPosition as K } from "../Tooltip/Tooltip.es.es.js";
import { DropZonePosition as k } from "../../utilities/dnd/types.es.es.js";
import { useDrag as Q } from "../../../../../react-dnd/dist/hooks/useDrag/useDrag.es.js";
const U = ({
  nodes: t,
  activeIds: m,
  treeId: n,
  onClick: o,
  onDrop: a,
  onEditableSave: d,
  onNodeExpand: s,
  forceCaret: p,
  parentIds: f
}) => t.map((r, l) => /* @__PURE__ */ e.createElement($, {
  key: r.id,
  node: r,
  nodeIndex: l,
  activeIds: m,
  onClick: o,
  isFirst: l === 0,
  onDrop: a,
  onEditableSave: d,
  onNodeExpand: s,
  forceCaret: p,
  parentIds: f,
  treeId: n
})), X = (t, m) => {
  const n = (o, a) => {
    if (o.nodes && a) {
      for (const d of o.nodes)
        if (a.includes(d.id) || n(d, a))
          return !0;
    }
    return !1;
  };
  return n(t, m);
}, $ = ({
  node: t,
  strong: m = !1,
  activeIds: n,
  onClick: o,
  parentIds: a = [],
  isFirst: d,
  onDrop: s,
  onEditableSave: p,
  onNodeExpand: f,
  treeId: r
}) => {
  const { id: l, value: h, name: u, label: C, icon: N, nodes: v, actions: I, editable: S, badge: x, tooltipContent: j, forceCaret: z } = t, [{ opacity: A }, F] = Q({
    item: { id: l, value: h, name: u, label: C, icon: N, nodes: v, actions: I, editable: S, badge: x },
    collect: (i) => ({
      opacity: i.isDragging() ? 0.4 : 1
    }),
    type: r,
    canDrag: s !== void 0
  }), [g, L] = E(X(t, n)), [V, P] = E(!1), w = n && n.length > 0 && n.includes(l), W = () => P(!0), M = () => P(!1), R = () => {
    if (!h) {
      L(!g);
      return;
    }
    o && o(l);
  }, [Z, _] = E(!1), B = (i) => {
    Z || f == null || f(l), _(!0), i.stopPropagation(), L(!g);
  }, O = () => /* @__PURE__ */ e.createElement(J, {
    disabled: !j,
    content: j,
    position: K.Right,
    withArrow: !0,
    triggerElement: /* @__PURE__ */ e.createElement("div", {
      "data-test-id": "node-badge",
      className: c([
        "tw-flex tw-justify-center tw-items-center tw-ml-2 tw-text-text-weak",
        (x == null ? void 0 : x.props.size) && "tw-w-8 tw-h-5 tw-bg-box-neutral tw-rounded-full"
      ])
    }, x)
  }), b = H(null), [T, q] = E(!1);
  Y(() => (y(), window.addEventListener("resize", y), () => {
    window.removeEventListener("resize", y);
  }), []);
  const y = () => {
    if (b.current) {
      const i = b.current.scrollWidth > b.current.clientWidth;
      q(i);
    }
  };
  return /* @__PURE__ */ e.createElement("li", {
    "data-test-id": "node",
    ref: F,
    style: { opacity: A }
  }, d && /* @__PURE__ */ e.createElement(D, {
    data: {
      targetItem: t,
      position: k.Before
    },
    onDrop: s,
    treeId: r
  }), /* @__PURE__ */ e.createElement(D, {
    data: {
      targetItem: t,
      position: k.Within
    },
    onDrop: s,
    treeId: r
  }, /* @__PURE__ */ e.createElement("div", {
    className: c([
      "tw-flex tw-py-2 tw-px-2.5 tw-no-underline tw-leading-5 tw-h-10",
      m && "tw-font-bold",
      h && !w && "tw-text-text hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover",
      w && "tw-font-medium tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover hover:tw-text-box-selected-strong-inverse-hover"
    ]),
    onMouseEnter: W,
    onMouseLeave: M
  }, /* @__PURE__ */ e.createElement("a", {
    "data-test-id": "node-link",
    className: c([
      "tw-flex tw-items-center tw-flex-grow tw-justify-between tw-cursor-pointer tw-h-6",
      a.length === 1 && "tw-pl-4",
      a.length > 1 && "tw-pl-8"
    ]),
    "aria-selected": w,
    onClick: R
  }, /* @__PURE__ */ e.createElement("div", {
    className: "tw-flex tw-flex-1 tw-space-x-1 tw-items-center tw-h-full"
  }, /* @__PURE__ */ e.createElement("span", {
    "data-test-id": "toggle",
    className: "tw-w-2 tw-h-3 tw-flex tw-items-center tw-justify-center",
    onClick: B
  }, (v || z) && /* @__PURE__ */ e.createElement("div", {
    className: c([
      "tw-transition-transform tw-w-0 tw-h-0 tw-text-black-100 tw-text-opacity-40 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong",
      g ? "tw-rotate-90" : "",
      w && "tw-text-box-selected-strong-inverse"
    ])
  })), N && /* @__PURE__ */ e.createElement("span", {
    className: "tw-flex tw-justify-center tw-items-center tw-w-5"
  }, N), S && p ? /* @__PURE__ */ e.createElement("div", {
    ref: b,
    className: "tw-relative tw-top-[0.2rem] tw-w-full tw-flex-1 tw-h-full"
  }, /* @__PURE__ */ e.createElement(G, {
    options: {
      additionalValues: t.id,
      enableDoubleClick: !0,
      isSlimInputField: !0,
      removeBoxPadding: !0
    },
    onAdditionalValueSave: p,
    isOverflowing: !0
  }, /* @__PURE__ */ e.createElement("span", {
    title: T ? u : "",
    className: "tw-max-w-full tw-absolute tw-top-[-0.08rem] tw-truncate"
  }, u))) : /* @__PURE__ */ e.createElement("span", {
    className: "tw-flex tw-items-center tw-flex-1 tw-relative tw-h-10",
    title: T ? u : "",
    "data-test-id": "node-link-name"
  }, /* @__PURE__ */ e.createElement("span", {
    ref: b,
    className: "tw-truncate tw-max-w-full tw-absolute"
  }, u)), /* @__PURE__ */ e.createElement("span", null, x && O())), /* @__PURE__ */ e.createElement("div", {
    className: "tw-px-1.5"
  }, /* @__PURE__ */ e.createElement("span", {
    "data-test-id": "node-label",
    className: c([
      "tw-text-black-100 tw-text-opacity-40 tw-text-xs tw-font-normal",
      w && "tw-text-box-selected-strong-inverse"
    ])
  }, C))), I && /* @__PURE__ */ e.createElement("div", {
    className: c([
      "tw-flex tw-items-center",
      V || w ? "tw-visible tw-space-x-1.5" : "tw-invisible tw-w-0"
    ])
  }, I.map((i) => i)))), v && g && /* @__PURE__ */ e.createElement("ul", {
    className: "tw-p-0 tw-m-0 tw-font-sans tw-font-normal tw-list-none tw-text-left",
    "data-test-id": "sub-tree"
  }, U({
    nodes: v,
    treeId: r,
    activeIds: n,
    onClick: o,
    onDrop: s,
    onEditableSave: p,
    onNodeExpand: f,
    parentIds: [...a, l]
  })), /* @__PURE__ */ e.createElement(D, {
    data: {
      targetItem: t,
      position: k.After
    },
    onDrop: s,
    treeId: r
  }));
};
export {
  $ as Node,
  U as renderNodeArray
};
//# sourceMappingURL=Node.es.es.js.map
