import { c1 as Y, jq as ee, P as m, jr as pe, V as n, js as ue, gi as $, jt as he, ju as ge, jv as me, jw as fe, jx as ye, jy as Ce, jz as xe, jA as te, b9 as oe, hI as ve, bg as be, jB as ke, h$ as Ne, jC as Te, hX as Q, hJ as Ae, d6 as De, hL as we, a0 as R, hM as Be, bh as Ie, cW as Se, hQ as Ve, hR as Ee, hS as je, jD as Ke, bz as Pe, bE as ne, jE as $e, gD as Re, ce as Fe, bx as Ue } from "./684d2f28.js";
import { useState as f, useEffect as v, useContext as Me, useCallback as X, useMemo as We } from "react";
import { D as Le, C as ze, N as He } from "./bf87bf48.js";
import { c as Oe } from "./ed41324b.js";
import { a as Ge } from "./ecf3338c.js";
import "react-dom";
import "./717d41b5.js";
import "./55f8e851.js";
import "./b7901950.js";
function _(G) {
  const {
    colorKey: s,
    name: F,
    desc: U,
    color: k,
    radius: D,
    configChange: N,
    showVarName: E = !0,
    margin: w,
    padding: B,
    gridColumns: b
    //Added By Aqib Mirza
  } = G, M = Y.debounce(N, 0), [y, T] = f(k), [J, j] = f(D), [W, A] = f(w), [K, I] = f(B), [S, P] = f(b), L = `(${s})`, z = () => {
    !y || !ee(y) ? T(k) : (T(te(y)), N({
      colorKey: s,
      color: te(y)
    }));
  }, q = (e) => {
    let i = "";
    !e || Number(e) === 0 ? i = "0" : /^[0-9]+$/.test(e) ? i = Number(e) + "px" : /^[0-9]+(px|%)$/.test(e) ? i = e : i = "0", j(i), N({
      colorKey: s,
      radius: i
    });
  }, H = (e) => {
    let i = "";
    !e || Number(e) === 0 ? i = "0" : /^[0-9]+$/.test(e) ? i = Number(e) + "px" : /^[0-9]+(px|%)$/.test(e) ? i = e : i = "3px", A(i), N({
      colorKey: s,
      margin: i
    });
  }, V = (e) => {
    let i = "";
    !e || Number(e) === 0 ? i = "0" : /^[0-9]+$/.test(e) ? i = Number(e) + "px" : /^[0-9]+(px|%)$/.test(e) ? i = e : i = "3px", I(i), N({
      colorKey: s,
      padding: i
    });
  }, O = (e) => {
    let i = "";
    e ? i = e : i = "0", P(i), N({
      colorKey: s,
      gridColumns: i
    });
  };
  return v(() => {
    y && ee(y) && M({
      colorKey: s,
      color: y
    });
  }, [y]), v(() => {
    T(k);
  }, [k]), v(() => {
    j(D);
  }, [D]), v(() => {
    A(w);
  }, [w]), v(() => {
    I(B);
  }, [B]), v(() => {
    P(b);
  }, [b]), /* @__PURE__ */ m(pe, {
    className: G.className,
    children: [/* @__PURE__ */ m("div", {
      className: "text-desc",
      children: [/* @__PURE__ */ m("div", {
        className: "name",
        children: [F, " ", E && /* @__PURE__ */ n("span", {
          children: L
        })]
      }), /* @__PURE__ */ n("div", {
        className: "desc",
        children: U
      })]
    }), s !== "borderRadius" && s !== "margin" && s !== "padding" && s !== "gridColumns" && /* @__PURE__ */ m("div", {
      className: "config-input",
      children: [/* @__PURE__ */ n(ue, {
        changeColor: Y.debounce(T, 500, {
          leading: !0,
          trailing: !0
        }),
        color: y,
        trigger: "hover"
      }), /* @__PURE__ */ n($, {
        value: y,
        onChange: (e) => T(e.target.value),
        onBlur: z,
        onKeyUp: (e) => e.nativeEvent.key === "Enter" && z()
      })]
    }), s === "borderRadius" && /* @__PURE__ */ m("div", {
      className: "config-input",
      children: [/* @__PURE__ */ n(he, {
        $radius: D || "0",
        children: /* @__PURE__ */ n("div", {
          children: /* @__PURE__ */ n("div", {})
        })
      }), /* @__PURE__ */ n($, {
        value: J,
        onChange: (e) => j(e.target.value),
        onBlur: (e) => q(e.target.value),
        onKeyUp: (e) => e.nativeEvent.key === "Enter" && q(e.currentTarget.value)
      })]
    }), s === "margin" && /* @__PURE__ */ m("div", {
      className: "config-input",
      children: [/* @__PURE__ */ n(ge, {
        $margin: w || "4px",
        children: /* @__PURE__ */ n("div", {
          children: /* @__PURE__ */ n(me, {
            title: ""
          })
        })
      }), /* @__PURE__ */ n($, {
        value: W,
        onChange: (e) => A(e.target.value),
        onBlur: (e) => H(e.target.value),
        onKeyUp: (e) => e.nativeEvent.key === "Enter" && H(e.currentTarget.value)
      })]
    }), s === "padding" && /* @__PURE__ */ m("div", {
      className: "config-input",
      children: [/* @__PURE__ */ n(fe, {
        $padding: B || "4px",
        children: /* @__PURE__ */ n("div", {
          children: /* @__PURE__ */ n(ye, {
            title: ""
          })
        })
      }), /* @__PURE__ */ n($, {
        value: K,
        onChange: (e) => I(e.target.value),
        onBlur: (e) => V(e.target.value),
        onKeyUp: (e) => e.nativeEvent.key === "Enter" && V(e.currentTarget.value)
      })]
    }), s === "gridColumns" && /* @__PURE__ */ m("div", {
      className: "config-input",
      children: [/* @__PURE__ */ n(Ce, {
        $gridColumns: b || "24",
        children: /* @__PURE__ */ n("div", {
          children: /* @__PURE__ */ n(xe, {
            title: ""
          })
        })
      }), /* @__PURE__ */ n($, {
        value: S,
        onChange: (e) => P(e.target.value),
        onBlur: (e) => O(e.target.value),
        onKeyUp: (e) => e.nativeEvent.key === "Enter" && O(e.currentTarget.value)
      })]
    })]
  });
}
const Je = oe.div`
  height: calc(100vh - ${ve});
`, qe = oe(Ue)`
  .ant-dropdown-menu-item-icon {
    width: 14px !important;
    height: 14px !important; 
    max-width: 14px !important;
  }
`, lt = (G) => {
  const s = Me(be), [F, U] = f([]);
  ke(), Ne();
  const [k, D] = f(s.getCollisionStatus());
  v(() => {
    Te(k);
  }, [k]);
  const N = (o) => {
    s.rootComp.children.settings.children.disableCollision.dispatchChangeValueAction(o), D(o);
  }, E = (o, r, t) => {
    const {
      items: a,
      children: c
    } = o;
    if (Object.keys(a).length)
      for (const p in a) {
        const h = {
          title: a[p].children.name.getView(),
          type: a[p].children.compType.getView(),
          key: p,
          children: []
        };
        if (t) {
          const x = Q(r, t);
          h.disabled = !0, x == null || x.children.push(h);
        } else
          r.push(h);
      }
    if (Object.keys(c).length)
      for (const p in c)
        E(c[p], r, p);
    return r;
  }, w = X((o) => {
    s.setSelectedCompNames(/* @__PURE__ */ new Set([o]), "leftPanel");
  }, [s]), B = (o, r) => (r.find((t) => t.name === o.title), /* @__PURE__ */ n(He, {
    children: /* @__PURE__ */ n("span", {
      children: /* @__PURE__ */ n("span", {
        children: o.title
      })
    })
  })), [b, M] = f([]);
  v(() => {
    const o = y();
    M(o);
  }, [s]);
  const y = () => {
    const o = s.getUIComp().getTree(), r = E(o, []), t = s.rootComp.toJsonValue();
    return t.ui.compType === "module" ? r.forEach((a) => {
      a.pos = t.ui.comp.container.layout[a.key].pos;
    }) : r.forEach((a) => {
      a.pos = t.ui.layout[a.key].pos;
    }), r.sort((a, c) => {
      const p = (a == null ? void 0 : a.pos) || 0, h = (c == null ? void 0 : c.pos) || 0;
      return p < h ? -1 : p > h ? 1 : 0;
    }), r;
  }, T = (o) => {
    const {
      expandedKeys: r
    } = o;
    r.includes(o.node.key) || U(r);
  }, J = (o) => {
    const r = o.node.pos.split("-"), t = o.dragNode.pos.split("-");
    r.length === t.length && M((a) => {
      let c = Oe(a);
      const p = Number(r[r.length - 1]), h = Number(t[t.length - 1]), x = r.slice(0, -1).join("-"), C = x === "0" ? {
        children: c
      } : j(c, x);
      if (C && C.children) {
        const u = C.children.findIndex((l) => l.key === o.dragNode.key);
        if (u !== -1) {
          const [l] = C.children.splice(u, 1);
          C.children.splice(p > h ? p - 1 : p, 0, l);
        }
      }
      const g = s.rootComp.toJsonValue();
      let d = {};
      if (g.ui.compType === "module") {
        C.children.forEach((l, de) => {
          d[l.key] = {
            ...g.ui.comp.container.layout[l.key],
            pos: de
          };
        });
        const u = s.rootComp.children.ui.getModuleLayoutComp();
        u == null || u.children.container.dispatchChangeValueAction({
          ...g.ui.comp.container,
          layout: d
        });
      } else
        C.children.forEach((u, l) => {
          d[u.key] = {
            ...g.ui.layout[u.key],
            pos: l
          };
        }), s.rootComp.children.ui.dispatchChangeValueAction({
          ...g.ui,
          layout: d
        });
      return c;
    });
  }, j = (o, r) => {
    const t = r.split("-").map((c) => Number(c));
    let a = {
      children: o
    };
    for (let c = 0; c < t.length; c++)
      a = a.children[t[c]];
    return a;
  }, [W, A] = f([]), [K, I] = f(""), [S, P] = f(null), [L, z] = f(""), [q, H] = f(""), V = (o, r) => {
    var t, a, c, p, h;
    for (let x of e()) {
      const C = Q(b, x), g = s.getUICompByName(C.title);
      if (g) {
        const {
          children: d
        } = g.children.comp, u = g.children.compType.getView(), l = r.split(".");
        l.length === 1 ? (t = d[l[0]]) == null || t.dispatchChangeValueAction(o) : l.length === 2 && (d[l[0]] ? d[l[0]].children[l[1]] ? (p = d[l[0]].children[l[1]]) == null || p.dispatchChangeValueAction(o) : (h = d[l[0]][l[1]]) == null || h.dispatchChangeValueAction(o) : (a = d[u].children[l[0]]) != null && a.children[l[1]] && ((c = d[u].children[l[0]].children[l[1]]) == null || c.dispatchChangeValueAction(o)));
      }
    }
  };
  v(() => {
    A([]);
    const o = [], r = s.getUIComp().getTree(), t = E(r, []);
    for (let a of s.selectedCompNames)
      for (let c of t)
        c.title === a && o.push(c.key);
    A(o);
  }, [s]), v(() => {
    I(""), H("#ffffff");
  }, [S, L]);
  const O = (o, r) => {
    A(o);
    const t = /* @__PURE__ */ new Set();
    for (let a of r.checkedNodes)
      t.add(a.title);
    s.setSelectedCompNames(t, "leftPanel");
  }, e = () => W, i = () => K, Z = X((o) => {
    var t, a, c, p, h;
    const r = i();
    for (let x of e()) {
      const C = Q(b, x), g = s.getUICompByName(C.title);
      if (g) {
        const {
          children: d
        } = g.children.comp, u = g.children.compType.getView(), l = o.split(".");
        l.length === 1 ? (t = d[l[0]]) == null || t.dispatchChangeValueAction(r) : l.length === 2 && (d[l[0]] ? d[l[0]].children[l[1]] ? (p = d[l[0]].children[l[1]]) == null || p.dispatchChangeValueAction(r) : (h = d[l[0]][l[1]]) == null || h.dispatchChangeValueAction(r) : (a = d[u].children[l[0]]) != null && a.children[l[1]] && ((c = d[u].children[l[0]].children[l[1]]) == null || c.dispatchChangeValueAction(r)));
      }
    }
  }, [i, e]), le = X((o) => {
    P(o), z(re(o));
  }, [Z]), se = [{
    label: "Hide Component",
    key: "hidden"
  }, {
    label: "Disable Component",
    key: "disable"
  }, {
    label: "Margin",
    key: "style.margin"
  }, {
    label: "Padding",
    key: "style.padding"
  }, {
    label: "Border Radius",
    key: "style.radius"
  }, {
    label: "Border Width",
    key: "style.borderWidth"
  }, {
    label: "Font Size",
    key: "style.textSize"
  }, {
    label: "Font Weight",
    key: "style.textWeight"
  }, {
    label: "Font Family",
    key: "style.fontFamily"
  }], re = (o) => {
    switch (o) {
      case "hidden":
      case "disable":
        return "true | false";
      case "style.background":
      case "style.text":
      case "style.border":
        return "e.g., #ffffff";
      case "style.radius":
        return "e.g., 4px";
      case "style.borderWidth":
        return "e.g., 2px";
      case "style.textSize":
        return "e.g., 16px";
      case "style.textWeight":
        return "bold | 900";
      case "style.fontFamily":
        return "Arial, sans-serif";
      case "style.margin":
      case "style.padding":
        return "e.g., 4px 8px 16px 32px";
      default:
        return "Action Value";
    }
  }, ae = () => {
    const o = Y.sortBy(s.uiCompInfoList(), [(t) => t.name]), r = s.getCollisionStatus();
    return /* @__PURE__ */ m(Ie, {
      children: [/* @__PURE__ */ m("div", {
        style: {
          margin: "0px 16px"
        },
        children: [/* @__PURE__ */ m("div", {
          style: {
            marginBottom: "10px"
          },
          children: [R("leftPanel.activatelayers"), /* @__PURE__ */ n(Se, {
            style: {
              margin: "0px 10px"
            },
            size: "small",
            defaultChecked: k,
            disabled: !1,
            onChange: (t) => {
              N(t);
            }
          })]
        }), /* @__PURE__ */ n(Le, {
          checkable: !0,
          onCheck: O,
          selectable: !1,
          checkedKeys: W,
          draggable: r,
          onDragEnter: T,
          onDrop: (t) => J(t),
          treeData: b,
          icon: (t) => t.type && /* @__PURE__ */ n("div", {
            style: {
              margin: "3px 4px 0 -4px"
            },
            children: ze[t.type] || /* @__PURE__ */ n(Ve, {})
          }),
          switcherIcon: (t) => t.expanded ? /* @__PURE__ */ n(Ee, {}) : /* @__PURE__ */ n(je, {}),
          expandedKeys: F,
          onExpand: (t) => U(t),
          titleRender: (t) => B(t, o)
        }), /* @__PURE__ */ n("div", {
          style: {
            margin: "10px 0px"
          },
          children: /* @__PURE__ */ m(Ke, {
            gap: "small",
            vertical: !0,
            children: [/* @__PURE__ */ n(qe, {
              dropdownRender: () => /* @__PURE__ */ n(Pe, {
                items: se,
                onClick: ({
                  key: t
                }) => le(t)
              }),
              children: /* @__PURE__ */ n(ne, {
                size: "small",
                children: /* @__PURE__ */ m($e, {
                  children: ["Action", /* @__PURE__ */ n(Ge, {})]
                })
              })
            }), /* @__PURE__ */ n(Re, {
              value: K,
              onChange: (t) => I(t.target.value),
              placeholder: L
            }), /* @__PURE__ */ n(ne, {
              type: "primary",
              disabled: !S,
              onClick: () => S && Z(S),
              children: "Apply Action"
            }), /* @__PURE__ */ n("br", {}), /* @__PURE__ */ n(_, {
              colorKey: "background",
              name: R("componentDoc.styleBackgroundColor"),
              color: "#ffffff",
              configChange: (t) => V(t.color, "style.background")
            }), /* @__PURE__ */ n(_, {
              colorKey: "border",
              name: R("componentDoc.styleBorderColor"),
              color: "#ffffff",
              configChange: (t) => V(t.color, "style.border")
            }), /* @__PURE__ */ n(_, {
              colorKey: "text",
              name: R("style.textColor"),
              color: "#ffffff",
              configChange: (t) => V(t.color, "style.text")
            })]
          })
        })]
      }), /* @__PURE__ */ n(Fe, {})]
    });
  }, ie = We(() => {
    if (!Ae(s.getAppType()))
      return ae();
  }, [s, w, F, b, K]), ce = /* @__PURE__ */ n(De, {
    children: /* @__PURE__ */ n("div", {
      style: {
        paddingBottom: 80
      },
      children: /* @__PURE__ */ n(we, {
        name: R("leftPanel.layers"),
        width: 288,
        noMargin: !0,
        children: /* @__PURE__ */ n("div", {
          className: Be,
          children: ie
        })
      })
    })
  });
  return /* @__PURE__ */ n(Je, {
    className: "cypress-left-content",
    children: ce
  });
};
export {
  lt as LeftLayersContent
};
