import { aE as ge, aF as we, aG as D, aH as L, aI as M, aJ as he, aK as xe, aL as Ne, aM as Ie, aN as Ce, aO as ke, aP as j, aQ as ve, a0 as Ve, aR as H, D as P, aA as K, a5 as k, aS as T, aT as U, aU as ee, aV as be, j as h, K as v, a3 as A, a1 as G, H as _, a2 as $e, a6 as ne, aW as We, aX as Re, f as Ae, aY as Ee, aZ as Pe, a_ as Te, a$ as Ke, b0 as J, b1 as _e, b2 as Be, J as De, b3 as Ge } from "./index-b203ecbb.js";
import * as O from "react";
import { createContext as te, forwardRef as re, useRef as Se, useEffect as q, useContext as B, useState as z, useMemo as b, useCallback as W, memo as je } from "react";
import { B as Oe } from "./index-ba865a7a.js";
import "react-dom";
const oe = te(null);
function He(n, e, t, c) {
  if (!c)
    return n;
  const i = n.findIndex((p) => p.value === e);
  if (i === -1)
    return n;
  const a = c > 0 ? 1 : -1, d = n[i + a];
  if (!d)
    return n;
  const r = n[i], u = d.layout, g = ge(u.min, u.max, 0.5);
  return a === 1 && r.layout.max + t > g || a === -1 && r.layout.min + t < g ? we(n, i, i + a) : n;
}
function qe({ children: n, as: e = "ul", axis: t = "y", onReorder: c, values: i, ...a }, d) {
  const r = D(() => L(e)), u = [], g = Se(!1);
  M(!!i, "Reorder.Group must be provided a values prop");
  const p = {
    axis: t,
    registerItem: (x, l) => {
      const o = u.findIndex((I) => x === I.value);
      o !== -1 ? u[o].layout = l[t] : u.push({ value: x, layout: l[t] }), u.sort(Je);
    },
    updateOrder: (x, l, o) => {
      if (g.current)
        return;
      const I = He(u, x, l, o);
      u !== I && (g.current = !0, c(I.map(Fe).filter((N) => i.indexOf(N) !== -1)));
    }
  };
  return q(() => {
    g.current = !1;
  }), O.createElement(
    r,
    { ...a, ref: d, ignoreStrict: !0 },
    O.createElement(oe.Provider, { value: p }, n)
  );
}
const ze = re(qe);
function Fe(n) {
  return n.value;
}
function Je(n, e) {
  return n.layout.min - e.layout.min;
}
function se(n) {
  const e = D(() => he(n)), { isStatic: t } = B(xe);
  if (t) {
    const [, c] = z(n);
    q(() => e.on("change", c), []);
  }
  return e;
}
const Qe = (n) => n && typeof n == "object" && n.mix, Xe = (n) => Qe(n) ? n.mix : void 0;
function Ye(...n) {
  const e = !Array.isArray(n[0]), t = e ? 0 : -1, c = n[0 + t], i = n[1 + t], a = n[2 + t], d = n[3 + t], r = Ne(i, a, {
    mixer: Xe(a[0]),
    ...d
  });
  return e ? r(c) : r;
}
function ie(n, e) {
  const t = se(e()), c = () => t.set(e());
  return c(), Ie(() => {
    const i = () => ke.update(c, !1, !0), a = n.map((d) => d.on("change", i));
    return () => {
      a.forEach((d) => d()), Ce(c);
    };
  }), t;
}
function Ze(n) {
  j.current = [], n();
  const e = ie(j.current, n);
  return j.current = void 0, e;
}
function Le(n, e, t, c) {
  if (typeof n == "function")
    return Ze(n);
  const i = typeof e == "function" ? e : Ye(e, t, c);
  return Array.isArray(n) ? Q(n, i) : Q([n], ([a]) => i(a));
}
function Q(n, e) {
  const t = D(() => []);
  return ie(n, () => {
    t.length = 0;
    const c = n.length;
    for (let i = 0; i < c; i++)
      t[i] = n[i].get();
    return e(t);
  });
}
function X(n, e = 0) {
  return ve(n) ? n : se(e);
}
function Me({ children: n, style: e = {}, value: t, as: c = "li", onDrag: i, layout: a = !0, ...d }, r) {
  const u = D(() => L(c)), g = B(oe), p = {
    x: X(e.x),
    y: X(e.y)
  }, x = Le([p.x, p.y], ([N, m]) => N || m ? 1 : "unset");
  M(!!g, "Reorder.Item must be a child of Reorder.Group");
  const { axis: l, registerItem: o, updateOrder: I } = g;
  return O.createElement(u, { drag: l, ...d, dragSnapToOrigin: !0, style: { ...e, x: p.x, y: p.y, zIndex: x }, layout: a, onDrag: (N, m) => {
    const { velocity: R } = m;
    R[l] && I(t, p[l].get(), R[l]), i && i(N, m);
  }, onLayoutMeasure: (N) => o(t, N), ref: r, ignoreStrict: !0 }, n);
}
const Ue = re(Me), Y = {
  Group: ze,
  Item: Ue
};
let ce = /* @__PURE__ */ new Set();
const en = () => {
  let n = 1, e = `View ${n}`;
  for (; ce.has(e); )
    n++, e = `View ${n}`;
  return e;
}, ae = () => `views-${Ve()}`, le = (n) => {
  ce = new Set(n);
  const e = en();
  return {
    id: ae(),
    key: e,
    label: e
  };
}, S = te({}), de = (n) => {
  const {
    viewsList: e,
    attrPath: t,
    widgetDisplayName: c,
    handleUpdateMultiAttrDSL: i,
    handleUpdateExecutionResult: a,
    componentNode: d
  } = n, r = H(), u = P(K), g = P(
    (y) => {
      const s = K(y);
      return k(s, c, {});
    }
  ), p = b(() => k(
    u,
    `${c}.${t}`,
    []
  ), [t, u, c]), x = b(() => k(g, "linkWidgetDisplayName", ""), [g]), l = b(() => k(u, `${c}.currentIndex`), [u, c]), o = b(() => p.map((y) => y.key), [p]), I = W(
    (y) => {
      if (e.length <= 1)
        return;
      const s = e.filter(
        (C, V) => (console.log(C), V !== y)
      ), f = d.childrenNode[y], w = {
        [t]: s,
        currentIndex: 0,
        currentKey: o[0]
      };
      if (l !== y) {
        const C = e[l].key, V = s.findIndex(
          (E) => E.key === C
        );
        V !== -1 && (w.currentIndex = V, w.currentKey = C);
      }
      i == null || i(w), r(
        T.deleteComponentNodeReducer({
          displayNames: [f]
        })
      );
    },
    [
      o,
      t,
      d.childrenNode,
      l,
      r,
      i,
      e
    ]
  ), N = W(
    (y) => {
      let s = e.find(
        (V, E) => (console.log(V), E === y)
      );
      if (!s)
        return;
      const f = U(
        ee,
        d.displayName
      ), w = le(o);
      s = {
        ...s,
        key: w.key,
        id: ae()
      };
      const C = [...e, s];
      i == null || i({
        [t]: C
      }), r(T.addComponentReducer([f]));
    },
    [
      o,
      t,
      d.displayName,
      r,
      i,
      e
    ]
  ), m = W(
    (y) => {
      if (y > e.length || y < 0)
        return;
      const s = p[y].key;
      if (a == null || a(c, {
        currentIndex: y,
        currentKey: s || y
      }), x)
        if (Array.isArray(x))
          x.forEach((f) => {
            a == null || a(f, {
              currentIndex: y,
              currentKey: s || y
            });
          });
        else {
          a == null || a(x, {
            currentIndex: y,
            currentKey: s || y
          });
          const f = k(
            u,
            `${x}.linkWidgetDisplayName`,
            []
          );
          f && Array.isArray(f) && f.forEach((w) => {
            w !== c && (a == null || a(w, {
              currentIndex: y,
              currentKey: s || y
            }));
          });
        }
    },
    [
      p,
      u,
      a,
      x,
      e.length,
      c
    ]
  ), R = W(
    (y, s) => {
      const f = e[y], w = e[l], C = be(d.childrenNode);
      [C[y], C[s]] = [
        C[s],
        C[y]
      ];
      const V = [...e];
      V.splice(y, 1), V.splice(s, 0, f);
      const E = V.findIndex(
        (fe) => fe.key === w.key
      ), me = V[E].key;
      i == null || i({
        [t]: V,
        currentIndex: E,
        currentKey: me
      }), r(
        T.sortComponentNodeChildrenReducer({
          parentDisplayName: d.displayName,
          newChildrenNode: C
        })
      );
    },
    [
      t,
      d.childrenNode,
      d.displayName,
      l,
      r,
      i,
      e
    ]
  ), $ = {
    ...n,
    handleDeleteOptionItem: I,
    handleCopyOptionItem: N,
    currentViewIndex: l,
    handleUpdateCurrentViewIndex: m,
    handleMoveOptionItem: R
  };
  return /* @__PURE__ */ h(S.Provider, { value: $, children: n.children });
};
de.displayName = "OptionListSetterProvider";
const nn = v`
  padding: 8px 16px;
  width: 100%;
`, tn = v`
  width: 100%;
  border-radius: 8px;
  border: 1px solid ${A("grayBlue-08")};
`, rn = v`
  width: 100%;
  background-color: ${A("grayBlue-09")};
  padding: 8px 8px 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
`, on = v`
  color: ${A("grayBlue-02")};
  font-weight: 500;
  font-size: 14px;
`, sn = (n) => v`
    width: 16px;
    height: 16px;
    border-radius: 8px;
    border: ${n ? `4px solid ${A("techPurple-03")}` : `2px solid ${A("grayBlue-08")}`};
    cursor: pointer;
  `, cn = v`
  display: flex;
  align-items: center;
  flex: 0;
`, an = v`
  display: flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
`, ln = v`
  display: flex;
  align-items: center;
  gap: 16px;
`, ue = v`
  cursor: pointer;
  width: 16px;
  height: 16px;
  color: ${A("grayBlue-04")};
`, dn = v`
  ${ue};
  visibility: hidden;
`;
v`
  cursor: move;
  color: ${A("grayBlue-04")};
  width: 16px;
  height: 16px;
  visibility: hidden;
`;
const un = v`
  width: 100%;
  height: 40px;
  padding: 9px 16px 9px 0;
  display: flex;
  justify-content: space-between;
  user-select: none;
  :hover {
    #dragIcon {
      visibility: visible;
    }
    #copyIcon {
      visibility: visible;
    }
  }
`, pn = (n) => {
  const { t: e } = G(), { labelName: t, addAction: c, hasAddAction: i } = n;
  return /* @__PURE__ */ _("div", { css: rn, children: [
    /* @__PURE__ */ h("span", { css: on, children: t }),
    i && /* @__PURE__ */ h($e, { onClick: c, children: e("editor.inspect.setter_content.column_setter.new") })
  ] });
}, yn = ({ isSelected: n, onClick: e }) => /* @__PURE__ */ h("div", { css: sn(n), onClick: e }), pe = (n) => {
  const { index: e, label: t, isSelected: c } = n, { widgetDisplayName: i, attrPath: a, handleUpdateCurrentViewIndex: d } = B(S), { t: r } = G(), u = P(K), g = b(() => k(u, `${i}.${a}.${e}`, {}), [a, u, e, i]), p = b(() => k(
    u,
    `${i}.${a}`,
    []
  ).map((I, N) => I.key || N).filter((I, N) => N != e), [a, u, e, i]), x = b(() => p.some((o) => o == g.key), [p, g]), l = W(
    (o) => {
      o.stopPropagation(), d(e);
    },
    [d, e]
  );
  return /* @__PURE__ */ h("span", { css: cn, children: /* @__PURE__ */ _("div", { css: an, children: [
    /* @__PURE__ */ h(yn, { isSelected: c, onClick: l }),
    /* @__PURE__ */ h("span", { style: { maxWidth: "147px" }, children: t }),
    x && /* @__PURE__ */ h(
      ne,
      {
        trigger: "hover",
        showArrow: !1,
        position: "bottom",
        content: `${r("widget.container.key_duplicated")}`,
        children: /* @__PURE__ */ h("div", { children: "Warning Icon" })
      }
    )
  ] }) });
};
pe.displayName = "DragIconAndLabel";
var F = {}, mn = Re;
Object.defineProperty(F, "__esModule", {
  value: !0
});
var ye = F.default = void 0, fn = mn(We()), gn = Ae;
ye = F.default = (0, fn.default)(/* @__PURE__ */ (0, gn.jsx)("path", {
  d: "M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"
}), "AddCircleOutline");
const wn = (n) => {
  const { label: e, index: t, isSelected: c } = n, [i, a] = z(!1), {
    handleDeleteOptionItem: d,
    handleCopyOptionItem: r,
    attrPath: u,
    widgetDisplayName: g,
    childrenSetter: p,
    handleUpdateDsl: x,
    handleUpdateMultiAttrDSL: l,
    handleUpdateOtherMultiAttrDSL: o
  } = B(S), { t: I } = G(), N = W(() => {
    a(!1);
  }, []), m = P(
    Ee
  ), R = (m == null ? void 0 : m.type) || "", $ = (m == null ? void 0 : m.parentNode) || "", y = (m == null ? void 0 : m.props) || {};
  return /* @__PURE__ */ h(
    ne,
    {
      withoutPadding: !0,
      colorScheme: "white",
      popupVisible: i,
      content: /* @__PURE__ */ h(
        Pe,
        {
          widgetType: R,
          widgetDisplayName: g,
          widgetParentDisplayName: $,
          widgetProps: y,
          handleUpdateDsl: x,
          handleUpdateMultiAttrDSL: (s) => {
            l == null || l(s);
          },
          handleUpdateOtherMultiAttrDSL: (s, f) => {
            o == null || o(s, f);
          },
          widgetOrAction: "WIDGET",
          children: /* @__PURE__ */ h(
            Oe,
            {
              title: I("editor.inspect.setter_content.option_list.model_title"),
              handleCloseModal: N,
              attrPath: `${u}.${t}`,
              widgetDisplayName: g,
              childrenSetter: p
            }
          )
        }
      ),
      trigger: "click",
      showArrow: !1,
      position: "left",
      clickOutsideToClose: !0,
      onVisibleChange: (s) => {
        a(s);
      },
      children: /* @__PURE__ */ _("span", { css: un, children: [
        /* @__PURE__ */ h(pe, { index: t, label: e, isSelected: c }),
        /* @__PURE__ */ _("span", { css: ln, children: [
          /* @__PURE__ */ h(
            Te,
            {
              css: ue,
              onClick: (s) => {
                s.stopPropagation(), d(t);
              }
            }
          ),
          /* @__PURE__ */ h(
            ye,
            {
              id: "copyIcon",
              css: dn,
              onClick: (s) => {
                s.stopPropagation(), r(t);
              }
            }
          )
        ] })
      ] })
    }
  );
}, Z = v`
  list-style: none;
  padding: 0;
  margin: 0;
`, hn = () => {
  const n = H(), {
    viewsList: e,
    componentNode: t,
    currentViewIndex: c,
    attrPath: i,
    handleUpdateMultiAttrDSL: a
  } = B(S), d = e.map((l, o) => Array.isArray(t.childrenNode) ? { ...l, childrenNode: t.childrenNode[o] } : { ...l, childrenNode: "" }), [r, u] = z(d), g = b(
    () => e[c],
    [e, c]
  ), p = W(() => {
    const l = [], o = [];
    r.forEach((m) => {
      m != null && m.childrenNode && l.push(m.childrenNode), o.push(Ke(m, ["childrenNode"]));
    });
    const I = o.findIndex(
      (m) => m.key === g.key
    ), N = o[I].key;
    a == null || a({
      [i]: o,
      currentIndex: I,
      currentKey: N
    }), n(
      T.sortComponentNodeChildrenReducer({
        parentDisplayName: t.displayName,
        newChildrenNode: l
      })
    );
  }, [
    r,
    a,
    i,
    n,
    t.displayName,
    g.key
  ]);
  q(() => {
    J(e, r) || u(
      e.map((l, o) => Array.isArray(t.childrenNode) ? { ...l, childrenNode: t.childrenNode[o] } : { ...l, childrenNode: "" })
    );
  }, [t.childrenNode, e]);
  const x = (l) => {
    J(l, r) || u(l);
  };
  return Array.isArray(e) ? /* @__PURE__ */ h(_e, { initial: !1, children: /* @__PURE__ */ h(
    Y.Group,
    {
      axis: "y",
      initial: !1,
      values: r,
      onReorder: x,
      css: Z,
      children: r.map((l, o) => {
        const { id: I, label: N, key: m } = l;
        return /* @__PURE__ */ h(
          Y.Item,
          {
            initial: !1,
            css: Z,
            value: l,
            onDragEnd: p,
            children: /* @__PURE__ */ h(
              wn,
              {
                value: l,
                label: N,
                index: o,
                isSelected: m === (g == null ? void 0 : g.key)
              },
              I
            )
          },
          l.id
        );
      })
    }
  ) }) : null;
}, xn = je((n) => {
  const {
    value: e,
    attrName: t,
    widgetDisplayName: c,
    childrenSetter: i,
    handleUpdateExecutionResult: a,
    handleUpdateMultiAttrDSL: d,
    handleUpdateOtherMultiAttrDSL: r,
    componentNode: u
  } = n, { t: g } = G(), p = P(K), x = H(), l = P(
    (s) => {
      const f = K(s);
      return k(f, c, {});
    }
  ), o = b(() => k(l, "linkWidgetDisplayName", ""), [l]), I = b(() => k(
    p,
    `${c}.${t}`,
    []
  ), [t, p, c]), N = b(() => I.map((s) => s.key), [I]), m = W(
    (s) => {
      if (d == null || d(s), o)
        if (Array.isArray(o))
          o.forEach((f) => {
            r == null || r(f, s);
          });
        else {
          r == null || r(o, s);
          const f = k(
            p,
            `${o}.linkWidgetDisplayName`,
            []
          );
          f && Array.isArray(f) && f.forEach((w) => {
            w !== c && (r == null || r(w, s));
          });
        }
    },
    [
      p,
      d,
      r,
      o,
      c
    ]
  ), R = W(
    (s, f) => {
      if (d == null || d({
        [s]: f
      }), o)
        if (Array.isArray(o))
          o.forEach((w) => {
            r == null || r(w, {
              [s]: f
            });
          });
        else {
          r == null || r(o, {
            [s]: f
          });
          const w = k(
            p,
            `${o}.linkWidgetDisplayName`,
            []
          );
          w && Array.isArray(w) && w.forEach((C) => {
            C !== c && (r == null || r(C, {
              [s]: f
            }));
          });
        }
    },
    [
      d,
      o,
      r,
      p,
      c
    ]
  ), $ = b(() => {
    if (u.type === "CONTAINER_WIDGET" || u.type === "GridCONTAINER_WIDGET")
      return u;
    const s = Be(
      De(Ge.getState()),
      o
    );
    return (s == null ? void 0 : s.type) === "CONTAINER_WIDGET" || u.type === "GridCONTAINER_WIDGET" ? s : {};
  }, [u, o]), y = W(() => {
    const s = le(N), f = U(
      ee,
      $ == null ? void 0 : $.displayName
    );
    if (d == null || d({
      [t]: [...e, s]
    }), o)
      if (Array.isArray(o))
        o.forEach((w) => {
          r == null || r(w, {
            [t]: [...e, s]
          });
        });
      else {
        r == null || r(o, {
          [t]: [...e, s]
        });
        const w = k(
          p,
          `${o}.linkWidgetDisplayName`,
          []
        );
        w && Array.isArray(w) && w.forEach((C) => {
          C !== c && (r == null || r(C, {
            [t]: [...e, s]
          }));
        });
      }
    x(T.addComponentReducer([f]));
  }, [
    $ == null ? void 0 : $.displayName,
    N,
    t,
    x,
    p,
    d,
    r,
    o,
    e,
    c
  ]);
  return /* @__PURE__ */ h(
    de,
    {
      viewsList: e,
      childrenSetter: i || [],
      widgetDisplayName: c,
      attrPath: t,
      handleUpdateDsl: R,
      handleUpdateMultiAttrDSL: m,
      handleUpdateExecutionResult: a,
      handleUpdateOtherMultiAttrDSL: r,
      componentNode: $,
      children: /* @__PURE__ */ h("div", { css: nn, children: /* @__PURE__ */ _("div", { css: tn, children: [
        /* @__PURE__ */ h(
          pn,
          {
            labelName: g("editor.inspect.setter_content.view_setter.views"),
            addAction: y,
            hasAddAction: !0
          }
        ),
        /* @__PURE__ */ h(hn, {})
      ] }) })
    }
  );
});
xn.displayName = "ViewsSetter";
export {
  xn as default
};
//# sourceMappingURL=index-0401d7d5.js.map
