import { _ as Fe, kW as De, kX as de, ad as p, kY as je, H as n, kZ as Je, k_ as x, k$ as Ze, l0 as _e, l1 as qe, l2 as Qe, l3 as et, l4 as tt, l5 as nt, l6 as rt, l7 as ce, l8 as ge, dz as ye, l9 as ue, la as pe, fu as Ke, lb as $e, a3 as Le, iI as at, am as it, hi as ot, i1 as lt, lc as st, iT as me, iJ as dt, eh as ct, iL as gt, a4 as W, iM as ut, I as pt, iQ as mt, iR as ht, iS as yt, cY as ft, as as vt, c8 as Ae, fZ as Ct, ld as It, cI as xt, ao as bt } from "./56c67d3b.js";
import { useState as c, useEffect as h, useContext as Bt, useRef as kt, useCallback as Q, useMemo as wt } from "react";
import { D as St, C as Nt, N as Rt } from "./1b32eda2.js";
import { c as Tt } from "./5f1c844f.js";
import { a as Pt } from "./b2ce40f6.js";
import "react-dom";
import "./38d8a151.js";
import "./c57f24d6.js";
function he(ee) {
  const {
    themeSettingKey: t,
    name: P,
    desc: Y,
    color: w,
    radius: E,
    configChange: g,
    showVarName: $ = !0,
    margin: S,
    padding: D,
    borderStyle: N,
    borderWidth: K,
    borderColor: A,
    fontFamily: M,
    showComponentLoadingIndicators: F,
    showDataLoadingIndicators: L,
    gridColumns: R,
    gridRowHeight: V,
    gridRowCount: G,
    gridPaddingX: U,
    gridPaddingY: T,
    gridBgImage: X,
    gridBgImageRepeat: te,
    gridBgImageSize: ne,
    gridBgImagePosition: re,
    gridBgImageOrigin: ae
  } = ee, z = Fe.debounce(g, 0), [y, B] = c(w), [j, H] = c(E), [ie, O] = c(S), [oe, i] = c(D), [l, r] = c(N), [s, d] = c(K), [m, v] = c(A), [b, C] = c(M), [I, u] = c(F), [f, o] = c(L), [le, se] = c(R), [Ve, fe] = c(V), [Ge, J] = c(G), [Ue, Z] = c(U), [ze, _] = c(T), [He, ve] = c(X), [Oe, Ce] = c(te), [We, Ie] = c(ne), [Ye, xe] = c(re), [Me, be] = c(ae), Xe = `(${t})`, Be = () => {
    !y || !De(y) || !de(y) ? B(w) : de(y) ? (B(y), g({
      themeSettingKey: t,
      color: y
    })) : (B($e(y)), g({
      themeSettingKey: t,
      color: $e(y)
    }));
  }, ke = (e) => {
    let a = "";
    !e || Number(e) === 0 ? a = "0" : /^[0-9]+$/.test(e) ? a = Number(e) + "px" : /^[0-9]+(px|%)$/.test(e) ? a = e : a = "0", H(a), g({
      themeSettingKey: t,
      radius: a
    });
  }, we = (e) => {
    let a = "";
    !e || Number(e) === 0 ? a = "0" : /^[0-9]+$/.test(e) ? a = Number(e) + "px" : /^[0-9]+(px|%)$/.test(e) ? a = e : a = "3px", O(a), g({
      themeSettingKey: t,
      margin: a
    });
  }, Se = (e) => {
    let a = "";
    !e || Number(e) === 0 ? a = "0" : /^[0-9]+$/.test(e) ? a = Number(e) + "px" : /^[0-9]+(px|%)$/.test(e) ? a = e : a = "3px", i(a), g({
      themeSettingKey: t,
      padding: a
    });
  }, Ne = (e) => {
    let a = "";
    e ? a = e : a = "solid", r(a), g({
      themeSettingKey: t,
      borderStyle: a
    });
  }, Re = (e) => {
    let a = "";
    !e || Number(e) === 0 ? a = "0" : /^[0-9]+$/.test(e) ? a = Number(e) + "px" : /^[0-9]+(px|%)$/.test(e) ? a = e : a = "1px", d(e), g({
      themeSettingKey: t,
      borderWidth: a
    });
  }, Te = (e) => {
    let a = "";
    e ? a = e : a = "Roboto, sans-serif", C(a), g({
      themeSettingKey: t,
      fontFamily: a
    });
  }, Pe = (e) => {
    let a = "";
    if (e ? a = e : a = t === "gridRowHeight" ? "8" : "24", t === "gridRowHeight") {
      fe(a), g({
        themeSettingKey: t,
        gridRowHeight: a
      });
      return;
    }
    se(a), g({
      themeSettingKey: t,
      gridColumns: a
    });
  }, Ee = (e) => {
    let a = 1 / 0;
    e !== "" && (a = Number(e)), J(a), g({
      themeSettingKey: t,
      gridRowCount: a
    });
  }, q = (e) => {
    let a = 20;
    if (e !== "" && (a = Number(e)), t === "gridPaddingX") {
      Z(a), g({
        themeSettingKey: t,
        gridPaddingX: a
      });
      return;
    }
    if (t === "gridPaddingY") {
      _(a), g({
        themeSettingKey: t,
        gridPaddingY: a
      });
      return;
    }
  }, k = (e) => {
    switch (t) {
      case "gridBgImage":
        ve(e), g({
          themeSettingKey: t,
          gridBgImage: e
        });
        break;
      case "gridBgImageRepeat":
        Ce(e || "no-repeat"), g({
          themeSettingKey: t,
          gridBgImageRepeat: e
        });
        break;
      case "gridBgImageSize":
        Ie(e || "cover"), g({
          themeSettingKey: t,
          gridBgImageSize: e
        });
        break;
      case "gridBgImagePosition":
        xe(e || "center"), g({
          themeSettingKey: t,
          gridBgImagePosition: e
        });
        break;
      case "gridBgImageOrigin":
        be(e || "padding-box"), g({
          themeSettingKey: t,
          gridBgImageOrigin: e
        });
        break;
    }
  };
  return h(() => {
    y && (De(y) || de(y)) && z({
      themeSettingKey: t,
      color: y
    });
  }, [y]), h(() => {
    B(w);
  }, [w]), h(() => {
    H(E);
  }, [E]), h(() => {
    O(S);
  }, [S]), h(() => {
    i(D);
  }, [D]), h(() => {
    se(R);
  }, [R]), h(() => {
    J(G);
  }, [G]), h(() => {
    r(N);
  }, [N]), h(() => {
    d(K);
  }, [K]), h(() => {
    v(A);
  }, [A]), h(() => {
    C(M);
  }, [M]), h(() => {
    u(F);
  }, [F]), h(() => {
    o(L);
  }, [L]), h(() => {
    Z(U);
  }, [U]), h(() => {
    _(T);
  }, [T]), /* @__PURE__ */ p(je, {
    className: ee.className,
    children: [t !== "showDataLoadingIndicators" && t !== "showComponentLoadingIndicators" && /* @__PURE__ */ p("div", {
      className: "text-desc",
      children: [/* @__PURE__ */ p("div", {
        className: "name",
        children: [P, " ", $ && /* @__PURE__ */ n("span", {
          children: Xe
        })]
      }), /* @__PURE__ */ n("div", {
        className: "desc",
        children: Y
      })]
    }), t !== "radius" && t !== "margin" && t !== "padding" && t !== "borderStyle" && t !== "borderWidth" && t !== "fontFamily" && t !== "showComponentLoadingIndicators" && t !== "showDataLoadingIndicators" && t !== "gridColumns" && t !== "gridRowHeight" && t !== "gridRowCount" && t !== "gridPaddingX" && t !== "gridPaddingY" && t !== "gridBgImage" && t !== "gridBgImageRepeat" && t !== "gridBgImageSize" && t !== "gridBgImagePosition" && t !== "gridBgImageOrigin" && /* @__PURE__ */ p("div", {
      className: "config-input",
      children: [/* @__PURE__ */ n(Je, {
        changeColor: B,
        color: y,
        trigger: "hover",
        allowGradient: t === "canvas" || t === "primarySurface"
      }), /* @__PURE__ */ n(x, {
        value: y,
        onChange: (e) => B(e.target.value),
        onBlur: Be,
        onKeyUp: (e) => e.nativeEvent.key === "Enter" && Be()
      })]
    }), t === "radius" && /* @__PURE__ */ p("div", {
      className: "config-input",
      children: [/* @__PURE__ */ n(Ze, {
        $radius: E || "0",
        children: /* @__PURE__ */ n("div", {
          children: /* @__PURE__ */ n(_e, {
            style: {
              width: "16px",
              margin: "-2px 0 2px -2px",
              padding: "0px"
            }
          })
        })
      }), /* @__PURE__ */ n(x, {
        value: j,
        onChange: (e) => H(e.target.value),
        onBlur: (e) => ke(e.target.value),
        onKeyUp: (e) => e.nativeEvent.key === "Enter" && ke(e.currentTarget.value)
      })]
    }), t === "borderStyle" && /* @__PURE__ */ p("div", {
      className: "config-input",
      children: [/* @__PURE__ */ n(qe, {
        $borderStyle: N || "solid",
        children: /* @__PURE__ */ n("div", {
          children: /* @__PURE__ */ n(Qe, {
            style: {
              width: "16px",
              margin: "2px 0 0 2px",
              padding: "0px"
            }
          })
        })
      }), /* @__PURE__ */ n(x, {
        value: l,
        onChange: (e) => r(e.target.value),
        onBlur: (e) => Ne(e.target.value),
        onKeyUp: (e) => e.nativeEvent.key === "Enter" && Ne(e.currentTarget.value)
      })]
    }), t === "borderWidth" && /* @__PURE__ */ p("div", {
      className: "config-input",
      children: [/* @__PURE__ */ n(et, {
        $borderWidth: K || "1px",
        children: /* @__PURE__ */ n("div", {
          children: /* @__PURE__ */ n(tt, {
            style: {
              width: "16px",
              margin: "2px 0 0 2px",
              padding: "0px"
            }
          })
        })
      }), /* @__PURE__ */ n(x, {
        value: s,
        onChange: (e) => d(e.target.value),
        onBlur: (e) => Re(e.target.value),
        onKeyUp: (e) => e.nativeEvent.key === "Enter" && Re(e.currentTarget.value)
      })]
    }), t === "margin" && /* @__PURE__ */ p("div", {
      className: "config-input",
      children: [/* @__PURE__ */ n(nt, {
        $margin: S || "4px",
        children: /* @__PURE__ */ n("div", {
          children: /* @__PURE__ */ n(rt, {
            title: ""
          })
        })
      }), /* @__PURE__ */ n(x, {
        value: ie,
        onChange: (e) => O(e.target.value),
        onBlur: (e) => we(e.target.value),
        onKeyUp: (e) => e.nativeEvent.key === "Enter" && we(e.currentTarget.value)
      })]
    }), t === "padding" && /* @__PURE__ */ p("div", {
      className: "config-input",
      children: [/* @__PURE__ */ n(ce, {
        $padding: D || "4px",
        children: /* @__PURE__ */ n("div", {
          children: /* @__PURE__ */ n(ge, {
            title: ""
          })
        })
      }), /* @__PURE__ */ n(x, {
        value: oe,
        onChange: (e) => i(e.target.value),
        onBlur: (e) => Se(e.target.value),
        onKeyUp: (e) => e.nativeEvent.key === "Enter" && Se(e.currentTarget.value)
      })]
    }), t === "fontFamily" && /* @__PURE__ */ n("div", {
      className: "config-input",
      children: /* @__PURE__ */ n(x, {
        value: b,
        onChange: (e) => C(e.target.value),
        onBlur: (e) => Te(e.target.value),
        onKeyUp: (e) => e.nativeEvent.key === "Enter" && Te(e.currentTarget.value)
      })
    }), t === "showComponentLoadingIndicators" && /* @__PURE__ */ p("div", {
      style: {
        display: "flex",
        gap: "6px",
        lineHeight: "normal"
      },
      children: [/* @__PURE__ */ n(ye, {
        size: "small",
        checked: I,
        onChange: (e) => {
          u(e), g({
            themeSettingKey: t,
            showComponentLoadingIndicators: e
          });
        }
      }), /* @__PURE__ */ n("span", {
        children: P
      })]
    }), t === "showDataLoadingIndicators" && /* @__PURE__ */ p("div", {
      style: {
        display: "flex",
        gap: "6px",
        lineHeight: "normal"
      },
      children: [/* @__PURE__ */ n(ye, {
        size: "small",
        checked: f,
        onChange: (e) => {
          o(e), g({
            themeSettingKey: t,
            showDataLoadingIndicators: e
          });
        }
      }), /* @__PURE__ */ n("span", {
        children: P
      })]
    }), t === "gridColumns" && /* @__PURE__ */ p("div", {
      className: "config-input",
      children: [/* @__PURE__ */ n(ue, {
        $gridColumns: R || "24",
        children: /* @__PURE__ */ n("div", {
          children: /* @__PURE__ */ n(pe, {
            title: ""
          })
        })
      }), /* @__PURE__ */ n(Ke, {
        style: {
          width: "90%",
          margin: "8px 5% 0 5%"
        },
        min: 8,
        max: 48,
        value: parseInt(le || "24"),
        onChange: (e) => se(e.toString()),
        onChangeComplete: (e) => Pe(e.toString())
      })]
    }), t === "gridRowHeight" && /* @__PURE__ */ p("div", {
      className: "config-input",
      children: [/* @__PURE__ */ n(ue, {
        $gridColumns: R || "24",
        children: /* @__PURE__ */ n("div", {
          children: /* @__PURE__ */ n(pe, {
            title: ""
          })
        })
      }), /* @__PURE__ */ n(Ke, {
        style: {
          width: "90%",
          margin: "8px 5% 0 5%"
        },
        min: 4,
        max: 100,
        value: parseInt(Ve || "8"),
        onChange: (e) => fe(e.toString()),
        onChangeComplete: (e) => Pe(e.toString())
      })]
    }), t === "gridRowCount" && /* @__PURE__ */ p("div", {
      className: "config-input",
      children: [/* @__PURE__ */ n(ue, {
        $gridColumns: R || "24",
        children: /* @__PURE__ */ n("div", {
          children: /* @__PURE__ */ n(pe, {
            title: ""
          })
        })
      }), /* @__PURE__ */ n(x, {
        type: "number",
        min: 0,
        value: Ge,
        onChange: (e) => {
          if (e.target.value === "")
            return J(1 / 0);
          J(Number(e.target.value));
        },
        onBlur: (e) => Ee(e.target.value),
        onKeyUp: (e) => e.nativeEvent.key === "Enter" && Ee(e.currentTarget.value)
      })]
    }), t === "gridPaddingX" && /* @__PURE__ */ p("div", {
      className: "config-input",
      children: [/* @__PURE__ */ n(ce, {
        $padding: "3px",
        children: /* @__PURE__ */ n("div", {
          children: /* @__PURE__ */ n(ge, {
            title: ""
          })
        })
      }), /* @__PURE__ */ n(x, {
        type: "number",
        min: 0,
        value: Ue,
        onChange: (e) => {
          if (e.target.value === "")
            return Z(void 0);
          Z(Number(e.target.value));
        },
        onBlur: (e) => q(e.target.value),
        onKeyUp: (e) => e.nativeEvent.key === "Enter" && q(e.currentTarget.value)
      })]
    }), t === "gridPaddingY" && /* @__PURE__ */ p("div", {
      className: "config-input",
      children: [/* @__PURE__ */ n(ce, {
        $padding: "3px",
        children: /* @__PURE__ */ n("div", {
          children: /* @__PURE__ */ n(ge, {
            title: ""
          })
        })
      }), /* @__PURE__ */ n(x, {
        type: "number",
        min: 0,
        value: ze,
        onChange: (e) => {
          if (e.target.value === "")
            return _(void 0);
          _(Number(e.target.value));
        },
        onBlur: (e) => q(e.target.value),
        onKeyUp: (e) => e.nativeEvent.key === "Enter" && q(e.currentTarget.value)
      })]
    }), t === "gridBgImage" && /* @__PURE__ */ n("div", {
      className: "config-input",
      children: /* @__PURE__ */ n(x, {
        value: He,
        onChange: (e) => ve(e.target.value),
        onBlur: (e) => k(e.target.value),
        onKeyUp: (e) => e.nativeEvent.key === "Enter" && k(e.currentTarget.value)
      })
    }), t === "gridBgImageRepeat" && /* @__PURE__ */ n("div", {
      className: "config-input",
      children: /* @__PURE__ */ n(x, {
        value: Oe,
        onChange: (e) => Ce(e.target.value),
        onBlur: (e) => k(e.target.value),
        onKeyUp: (e) => e.nativeEvent.key === "Enter" && k(e.currentTarget.value)
      })
    }), t === "gridBgImageSize" && /* @__PURE__ */ n("div", {
      className: "config-input",
      children: /* @__PURE__ */ n(x, {
        value: We,
        onChange: (e) => Ie(e.target.value),
        onBlur: (e) => k(e.target.value),
        onKeyUp: (e) => e.nativeEvent.key === "Enter" && k(e.currentTarget.value)
      })
    }), t === "gridBgImagePosition" && /* @__PURE__ */ n("div", {
      className: "config-input",
      children: /* @__PURE__ */ n(x, {
        value: Ye,
        onChange: (e) => xe(e.target.value),
        onBlur: (e) => k(e.target.value),
        onKeyUp: (e) => e.nativeEvent.key === "Enter" && k(e.currentTarget.value)
      })
    }), t === "gridBgImageOrigin" && /* @__PURE__ */ n("div", {
      className: "config-input",
      children: /* @__PURE__ */ n(x, {
        value: Me,
        onChange: (e) => be(e.target.value),
        onBlur: (e) => k(e.target.value),
        onKeyUp: (e) => e.nativeEvent.key === "Enter" && k(e.currentTarget.value)
      })
    })]
  });
}
const Et = [{
  label: "Hide Component",
  key: "hidden"
}, {
  label: "Disable Component",
  key: "disable"
}, {
  label: "Margin",
  key: "style.margin"
}, {
  label: "Padding",
  key: "style.padding"
}, {
  label: "Font Size",
  key: "style.textSize"
}, {
  label: "Font Weight",
  key: "style.textWeight"
}, {
  label: "Font Family",
  key: "style.fontFamily"
}, {
  label: "Font Style",
  key: "style.fontStyle"
}, {
  label: "Text Transform",
  key: "style.textTransform"
}, {
  label: "Text Decoration",
  key: "style.textDecoration"
}, {
  label: "Border Radius",
  key: "style.borderRadius"
}, {
  label: "Border Width",
  key: "style.borderWidth"
}, {
  label: "Border Style",
  key: "style.borderStyle"
}, {
  label: "Background Image",
  key: "style.backgroundImage"
}, {
  label: "Background Image Repeat",
  key: "style.backgroundImageRepeat"
}, {
  label: "Background Image Size",
  key: "style.backgroundImageSize"
}, {
  label: "Background Image Position",
  key: "style.backgroundImagePosition"
}, {
  label: "Background Image Origin",
  key: "style.backgroundImageOrigin"
}], Dt = Le.div`
  height: calc(100vh - ${at});
`, Kt = Le(bt)`
  .ant-dropdown-menu-item-icon {
    width: 14px !important;
    height: 14px !important; 
    max-width: 14px !important;
  }
`, Ht = (ee) => {
  const t = Bt(it), [P, Y] = c([]);
  ot(), lt();
  const [w, E] = c(t.getCollisionStatus()), [g, $] = c([]), [S, D] = c(""), [N, K] = c(null), [A, M] = c(""), F = kt(null);
  h(() => {
    st(w);
  }, [w]);
  const L = Q((i) => {
    K(i);
  }, []), R = (i) => {
    t.rootComp.children.settings.children.disableCollision.dispatchChangeValueAction(i), E(i);
  }, V = (i, l, r) => {
    const {
      items: s,
      children: d
    } = i;
    if (Object.keys(s).length)
      for (const m in s) {
        const v = {
          title: s[m].children.name.getView(),
          type: s[m].children.compType.getView(),
          key: m,
          children: []
        };
        if (r) {
          const b = me(l, r);
          v.disabled = !0, b == null || b.children.push(v);
        } else
          l.push(v);
      }
    if (Object.keys(d).length)
      for (const m in d)
        V(d[m], l, m);
    return l;
  }, G = Q((i) => {
    t.setSelectedCompNames(/* @__PURE__ */ new Set([i]), "leftPanel");
  }, [t]), U = (i, l) => (l.find((r) => r.name === i.title), /* @__PURE__ */ n(Rt, {
    children: /* @__PURE__ */ n("span", {
      children: /* @__PURE__ */ n("span", {
        children: i.title
      })
    })
  })), [T, X] = c([]);
  h(() => {
    const i = te();
    X(i);
  }, [t]);
  const te = () => {
    const i = t.getUIComp().getTree(), l = V(i, []), r = t.rootComp.toJsonValue();
    return r.ui.compType === "module" ? l.forEach((s) => {
      s.pos = r.ui.comp.container.layout[s.key].pos;
    }) : l.forEach((s) => {
      s.pos = r.ui.layout[s.key].pos;
    }), l.sort((s, d) => {
      const m = (s == null ? void 0 : s.pos) || 0, v = (d == null ? void 0 : d.pos) || 0;
      return m < v ? -1 : m > v ? 1 : 0;
    }), l;
  }, ne = (i) => {
    const {
      expandedKeys: l
    } = i;
    l.includes(i.node.key) || Y(l);
  }, re = (i) => {
    const l = i.node.pos.split("-"), r = i.dragNode.pos.split("-");
    l.length === r.length && X((s) => {
      let d = Tt(s);
      const m = Number(l[l.length - 1]), v = Number(r[r.length - 1]), b = l.slice(0, -1).join("-"), C = b === "0" ? {
        children: d
      } : ae(d, b);
      if (C && C.children) {
        const f = C.children.findIndex((o) => o.key === i.dragNode.key);
        if (f !== -1) {
          const [o] = C.children.splice(f, 1);
          C.children.splice(m > v ? m - 1 : m, 0, o);
        }
      }
      const I = t.rootComp.toJsonValue();
      let u = {};
      if (I.ui.compType === "module") {
        C.children.forEach((o, le) => {
          u[o.key] = {
            ...I.ui.comp.container.layout[o.key],
            pos: le
          };
        });
        const f = t.rootComp.children.ui.getModuleLayoutComp();
        f == null || f.children.container.dispatchChangeValueAction({
          ...I.ui.comp.container,
          layout: u
        });
      } else
        C.children.forEach((f, o) => {
          u[f.key] = {
            ...I.ui.layout[f.key],
            pos: o
          };
        }), t.rootComp.children.ui.dispatchChangeValueAction({
          ...I.ui,
          layout: u
        });
      return d;
    });
  }, ae = (i, l) => {
    const r = l.split("-").map((d) => Number(d));
    let s = {
      children: i
    };
    for (let d = 0; d < r.length; d++)
      s = s.children[r[d]];
    return s;
  };
  Q((i) => {
    switch (i) {
      case "hidden":
      case "disable":
        return "true | false";
      case "style.border":
        return "e.g., #ffffff";
      case "style.borderRadius":
      case "style.radius":
        return "e.g., 4px";
      case "style.borderWidth":
        return "e.g., 2px";
      case "style.borderStyle":
        return "solid | dashed | dotted";
      case "style.backgroundImage":
        return "URL as string";
      case "style.backgroundImageRepeat":
        return "repeat | repeat-x | repeat-y | no-repeat";
      case "style.backgroundImageSize":
        return "cover | contain | % | px";
      case "style.backgroundImagePosition":
        return "top | bottom | center | % | px";
      case "style.backgroundImageOrigin":
        return "padding-box | border-box | content-box";
      case "style.margin":
      case "style.padding":
        return "e.g., 4px 8px 16px 32px";
      case "style.textSize":
        return "e.g., 16px";
      case "style.textWeight":
        return "bold | 900 | normal | 400";
      case "style.fontFamily":
        return "Arial, sans-serif";
      case "style.fontStyle":
        return "normal | italic | oblique";
      case "style.textTransform":
        return "none | capitalize | uppercase | lowercase";
      case "style.textDecoration":
        return "none | underline | overline | line-through";
      default:
        return "Action Value";
    }
  }, []);
  const z = (i, l) => {
    var r, s, d, m, v;
    for (let b of B()) {
      const C = me(T, b), I = t.getUICompByName(C.title);
      if (I) {
        const {
          children: u
        } = I.children.comp, f = I.children.compType.getView(), o = l.split(".");
        o.length === 1 ? (r = u[o[0]]) == null || r.dispatchChangeValueAction(i) : o.length === 2 && (u[o[0]] ? u[o[0]].children[o[1]] ? (m = u[o[0]].children[o[1]]) == null || m.dispatchChangeValueAction(i) : (v = u[o[0]][o[1]]) == null || v.dispatchChangeValueAction(i) : (s = u[f].children[o[0]]) != null && s.children[o[1]] && ((d = u[f].children[o[0]].children[o[1]]) == null || d.dispatchChangeValueAction(i)));
      }
    }
  };
  h(() => {
    $([]);
    const i = [], l = t.getUIComp().getTree(), r = V(l, []);
    for (let s of t.selectedCompNames)
      for (let d of r)
        d.title === s && i.push(d.key);
    $(i);
  }, [t]);
  const y = (i, l) => {
    $(i);
    const r = /* @__PURE__ */ new Set();
    for (let s of l.checkedNodes)
      r.add(s.title);
    t.setSelectedCompNames(r, "leftPanel");
  }, B = () => g, j = () => S, H = Q((i) => {
    var r, s, d, m, v;
    const l = j();
    for (let b of B()) {
      const C = me(T, b), I = t.getUICompByName(C.title);
      if (I) {
        const {
          children: u
        } = I.children.comp, f = I.children.compType.getView(), o = i.split(".");
        o.length === 1 ? (r = u[o[0]]) == null || r.dispatchChangeValueAction(l) : o.length === 2 && (u[o[0]] ? u[o[0]].children[o[1]] ? (m = u[o[0]].children[o[1]]) == null || m.dispatchChangeValueAction(l) : (v = u[o[0]][o[1]]) == null || v.dispatchChangeValueAction(l) : (s = u[f].children[o[0]]) != null && s.children[o[1]] && ((d = u[f].children[o[0]].children[o[1]]) == null || d.dispatchChangeValueAction(l)));
      }
    }
  }, [j, B]), ie = () => {
    const i = Fe.sortBy(t.uiCompInfoList(), [(r) => r.name]), l = t.getCollisionStatus();
    return /* @__PURE__ */ p(pt, {
      children: [/* @__PURE__ */ p("div", {
        style: {
          margin: "0px 16px"
        },
        children: [/* @__PURE__ */ p("div", {
          style: {
            marginBottom: "10px"
          },
          children: [W("leftPanel.activatelayers"), /* @__PURE__ */ n(ye, {
            style: {
              margin: "0px 10px"
            },
            size: "small",
            defaultChecked: w,
            disabled: !1,
            onChange: (r) => {
              R(r);
            }
          })]
        }), /* @__PURE__ */ n(St, {
          checkable: !0,
          onCheck: y,
          selectable: !1,
          checkedKeys: g,
          draggable: l,
          onDragEnter: ne,
          onDrop: (r) => re(r),
          treeData: T,
          icon: (r) => r.type && /* @__PURE__ */ n("div", {
            style: {
              margin: "3px 4px 0 -4px"
            },
            children: Nt[r.type] || /* @__PURE__ */ n(mt, {})
          }),
          switcherIcon: (r) => r.expanded ? /* @__PURE__ */ n(ht, {}) : /* @__PURE__ */ n(yt, {}),
          expandedKeys: P,
          onExpand: (r) => Y(r),
          titleRender: (r) => U(r, i)
        }), /* @__PURE__ */ n("div", {
          style: {
            margin: "10px 0px"
          },
          children: /* @__PURE__ */ p(ft, {
            gap: "small",
            vertical: !0,
            children: [/* @__PURE__ */ n(Kt, {
              dropdownRender: () => /* @__PURE__ */ n(vt, {
                items: Et,
                onClick: ({
                  key: r
                }) => {
                  L(r);
                }
              }),
              children: /* @__PURE__ */ n(Ae, {
                size: "small",
                children: /* @__PURE__ */ p(Ct, {
                  children: ["Action ", /* @__PURE__ */ n(Pt, {})]
                })
              })
            }), /* @__PURE__ */ n(It, {
              ref: F,
              value: S,
              onChange: (r) => D(r.target.value),
              placeholder: A
            }), /* @__PURE__ */ n(Ae, {
              type: "primary",
              disabled: !N,
              onClick: () => N && H(N),
              children: "Apply Action"
            }), /* @__PURE__ */ n("br", {}), /* @__PURE__ */ n(he, {
              themeSettingKey: "background",
              name: W("componentDoc.styleBackgroundColor"),
              color: "#ffffff",
              configChange: (r) => z(r.color, "style.background")
            }), /* @__PURE__ */ n(he, {
              themeSettingKey: "border",
              name: W("componentDoc.styleBorderColor"),
              color: "#ffffff",
              configChange: (r) => z(r.color, "style.border")
            }), /* @__PURE__ */ n(he, {
              themeSettingKey: "text",
              name: W("style.textColor"),
              color: "#ffffff",
              configChange: (r) => z(r.color, "style.text")
            })]
          })
        })]
      }), /* @__PURE__ */ n(xt, {})]
    });
  }, O = wt(() => {
    if (!dt(t.getAppType()))
      return ie();
  }, [t, G, P, T, S]), oe = /* @__PURE__ */ n(ct, {
    children: /* @__PURE__ */ n("div", {
      style: {
        paddingBottom: 80
      },
      children: /* @__PURE__ */ n(gt, {
        name: W("leftPanel.layers"),
        width: 288,
        noMargin: !0,
        children: /* @__PURE__ */ n("div", {
          className: ut,
          children: O
        })
      })
    })
  });
  return /* @__PURE__ */ n(Dt, {
    className: "cypress-left-content",
    children: oe
  });
};
export {
  Ht as LeftLayersContent
};
