import { a3 as P, H as t, _ as b, ad as m, gb as B, iE as ee, hq as D, iF as te, iG as M, a4 as k, iH as ne, iI as X, am as ae, iJ as E, iK as ie, eh as $, iL as S, iM as le, iN as H, I as _, iO as se, iP as oe, iQ as re, iR as ce, iS as de, iT as he, iU as pe, iV as fe, iW as ye } from "./56c67d3b.js";
import ge, { useContext as me, useState as V, useCallback as U, useMemo as O } from "react";
import { D as ue, C as ke, N as Ce } from "./1b32eda2.js";
import "react-dom";
const be = P.div`
  display: flex;
  width: fit-content;
  max-width: calc(100% - 8px);
`, we = P.div`
  padding: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  &:hover .copy-icon {
    visibility: visible;
  }
`;
P(D)`
  visibility: hidden;
  margin-left: 8px;
  color: #1890ff;
  cursor: pointer;
`;
function N(e) {
  return typeof e == "number" ? (e + "").toString().length : typeof e == "string" || typeof e == "boolean" ? e.toString().length : 0;
}
function q(e, o = 2) {
  const a = /* @__PURE__ */ new Set();
  return JSON.stringify(e, (s, l) => {
    if (typeof l == "object" && l !== null) {
      if (a.has(l))
        return "[Circular]";
      a.add(l);
    }
    return l;
  }, o);
}
function j(e, o, a, s) {
  const l = typeof e == "function" ? "Function" : q(e), f = {}, C = s === !0 ? N(l) > 42 ? l.slice(0, 42) + "..." : l : N(l) > 20 ? l.slice(0, 20) + "..." : l;
  if (f[o] = a, Array.isArray(e)) {
    const w = {};
    return e.forEach((I, x) => {
      w[x] = I;
    }), /* @__PURE__ */ t(v, {
      name: o,
      desc: f,
      data: w,
      isArray: !0,
      modal: s
    }, o);
  } else
    return b.isPlainObject(e) ? /* @__PURE__ */ t(v, {
      name: o,
      desc: f,
      data: e,
      modal: s
    }, o) : /* @__PURE__ */ m(we, {
      style: {
        marginLeft: "20px",
        borderBottom: "1px solid #f0f0f0",
        height: "32px",
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center"
      },
      children: [/* @__PURE__ */ m(B, {
        title: a,
        placement: "right",
        children: [/* @__PURE__ */ t(ee, {
          label: o
        }), " ​"]
      }), /* @__PURE__ */ m("div", {
        style: {
          display: "flex",
          wordBreak: "break-all",
          textAlign: "right"
        },
        children: [/* @__PURE__ */ t("span", {
          style: {
            marginRight: "10px"
          },
          children: C
        }), N(l) > 0 && /* @__PURE__ */ t(D, {
          text: e,
          style: {
            color: "#ccc",
            marginRight: "0px",
            marginTop: "4px"
          }
        })]
      })]
    }, o);
}
function xe(e) {
  let o = [], a = [];
  return e.forEach((s, l) => {
    l < 15 && o.push(s), l >= e.length - 5 && l < e.length && a.push(s);
  }), {
    preArr: o,
    afterArr: a
  };
}
function Te(e) {
  const o = Object.keys(e.data), a = xe;
  return /* @__PURE__ */ t("div", {
    children: o.length < 30 ? o.map((s) => {
      var l;
      return j(e.data[s], s, (l = e.desc) == null ? void 0 : l[s], e.modal);
    }) : /* @__PURE__ */ m(_, {
      children: [a(o).preArr.map((s) => {
        var l;
        return j(e.data[s], s, (l = e.desc) == null ? void 0 : l[s], e.modal);
      }), /* @__PURE__ */ t(se, {
        num: o.length - 6
      }), a(o).afterArr.map((s) => {
        var l;
        return j(e.data[s], s, (l = e.desc) == null ? void 0 : l[s], e.modal);
      })]
    })
  });
}
const v = ge.memo((e) => {
  var s;
  const {
    data: o = {}
  } = e, a = Object.keys(o).length === 1;
  return /* @__PURE__ */ t(te, {
    isSelected: e.isSelected,
    isOpen: e.isOpen,
    config: [{
      key: e.name,
      title: /* @__PURE__ */ m("div", {
        style: {
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center"
        },
        children: [/* @__PURE__ */ t(B, {
          title: (s = e.desc) == null ? void 0 : s[e.name],
          placement: "right",
          children: /* @__PURE__ */ m(be, {
            onClick: () => e.onClick && e.onClick(e.name),
            children: [/* @__PURE__ */ t(M, {
              style: {
                whiteSpace: "nowrap",
                textOverflow: "ellipsis",
                overflow: "hidden"
              },
              label: e.name,
              hasChild: Object.keys(o).length > 0
            }), /* @__PURE__ */ t(M, {
              style: {
                flexShrink: 0
              },
              color: "#8B8FA3",
              label: `${e.isArray ? "[]" : "{}"} ${k(e.isArray ? a ? "leftPanel.propTipArr" : "leftPanel.propTipsArr" : a ? "leftPanel.propTip" : "leftPanel.propTips", {
                num: Object.keys(o).length
              })}`
            })]
          })
        }), Object.keys(o).length > 0 && /* @__PURE__ */ t(D, {
          text: q(o),
          style: {
            color: "#aaa",
            marginRight: "8px"
          }
        })]
      }),
      data: Te({
        data: o,
        desc: e.desc,
        modal: e.modal
      })
    }]
  });
}), Se = P(ye)`
  .ant-tabs-nav {
    background-color: ${ne};
    height: 40px;
    padding: 0 16px;
    margin: 0;

    .ant-tabs-tab {
      padding: 0;
      font-weight: 500;
    }
  }

  .ant-tabs-tabpane {
    height: calc(100vh - ${X} - 40px);
  }
`, W = P.div`
  height: calc(100vh - ${X});
`, Be = (e) => {
  const {
    uiComp: o
  } = e, a = me(ae), [s, l] = V([]), [f, C] = V([]), w = (n, c, y) => {
    const {
      items: h,
      children: g
    } = n;
    if (Object.keys(h).length) {
      for (const i in h) {
        const r = {
          title: h[i].children.name.getView(),
          type: h[i].children.compType.getView(),
          key: i,
          children: []
        };
        if (y) {
          const d = he(c, y);
          d == null || d.children.push(r);
        } else
          c.push(r);
      }
      c = b.sortBy(c, [(i) => i.title]);
    }
    if (Object.keys(g).length)
      for (const i in g)
        w(g[i], c, i);
    return c;
  }, I = (n, c, y) => {
    var g, i, r;
    x(c.title + "");
    const h = y.find((d) => d.name === c.title);
    if (!((g = c.children) != null && g.length) && h && ((i = Object.keys(h.data)) != null && i.length) && c.selected) {
      const d = f.findIndex((u) => u.key === c.key);
      let p = [], T = ((r = n.currentTarget) == null ? void 0 : r.offsetLeft) + 20;
      d > -1 ? p = f.map((u) => u.key === c.key ? {
        key: u.key,
        show: !u.show,
        clientX: T
      } : u) : p = [...f, {
        key: c.key + "",
        show: !0,
        clientX: T
      }], C(p);
    }
  }, x = U((n) => {
    a.setSelectedCompNames(/* @__PURE__ */ new Set([n]), "leftPanel");
  }, [a]), R = U((n, c) => {
    a.setSelectedBottomRes(c, n);
  }, [a]), J = (n, c) => {
    var i;
    const y = f.find((r) => r.key === n.key), h = c.find((r) => r.name === n.title), g = (r, d) => /* @__PURE__ */ t("div", {
      children: Object.keys(r).map((p) => j(r[p], p, d == null ? void 0 : d[p], !0))
    });
    return /* @__PURE__ */ m(Ce, {
      children: [/* @__PURE__ */ m("span", {
        children: [/* @__PURE__ */ m("span", {
          children: [n.title, " "]
        }), h && !!((i = Object.keys(h.data)) != null && i.length) && (y != null && y.show ? /* @__PURE__ */ t(B, {
          placement: "right",
          title: k("leftPanel.collapseTip", {
            component: n.title
          }),
          children: /* @__PURE__ */ t("div", {
            title: "",
            className: "show-data",
            onClick: (r) => {
              r.stopPropagation();
              const d = f.map((p) => p.key === n.key ? {
                key: p.key,
                show: !1,
                clientX: void 0
              } : p);
              C(d);
            }
          })
        }) : /* @__PURE__ */ t(B, {
          placement: "right",
          title: k("leftPanel.expandTip", {
            component: n.title
          }),
          children: /* @__PURE__ */ t("div", {
            title: "",
            className: "no-data",
            onClick: (r) => {
              var u;
              r.stopPropagation();
              const d = f.findIndex((A) => A.key === n.key);
              let p = [];
              const T = {
                key: n.key,
                show: !0,
                clientX: (u = r.currentTarget.parentElement) == null ? void 0 : u.offsetLeft
              };
              d > -1 ? p = f.map((A) => A.key === n.key ? T : A) : p = [...f, T], C(p);
            },
            children: /* @__PURE__ */ t(pe, {})
          })
        }))]
      }), (y == null ? void 0 : y.show) && h && /* @__PURE__ */ t(fe, {
        title: h.name,
        open: y.show,
        onOk: () => C([]),
        cancelButtonProps: {
          style: {
            display: "none"
          }
        },
        maskClosable: !0,
        children: /* @__PURE__ */ t("div", {
          style: {
            whiteSpace: "nowrap",
            wordWrap: "normal",
            maxHeight: "calc(100vh - 400px)",
            overflow: "scroll"
          },
          onClick: (r) => r.stopPropagation(),
          children: g(h.data, h.dataDesc)
        })
      })]
    }, n.key);
  }, L = (n) => {
    const c = b.sortBy(a.uiCompInfoList(), [(i) => i.name]), y = n === "components" ? a.getUIComp().getTree() : a.getHooksComp().getUITree(), h = w(y, []);
    let g = [];
    if (a.selectedCompNames.size === 1) {
      const i = Object.keys(a.selectedComps())[0], r = oe(h, i);
      if (r && r.length) {
        let d = !1;
        r.forEach((p) => {
          s.includes(p) || (d = !0);
        }), d && l(b.union(s, r));
      }
      g.push(i);
    }
    return /* @__PURE__ */ t(ue, {
      treeData: h,
      icon: (i) => i.type && /* @__PURE__ */ t("div", {
        style: {
          margin: "16px 4px 0 -4px"
        },
        children: ke[i.type] || /* @__PURE__ */ t(re, {})
      }),
      switcherIcon: (i) => i.expanded ? /* @__PURE__ */ t(ce, {}) : /* @__PURE__ */ t(de, {}),
      expandedKeys: s,
      onExpand: (i) => l(i),
      onClick: (i, r) => I(i, r, c),
      selectedKeys: g,
      titleRender: (i) => J(i, c)
    });
  }, z = O(() => {
    if (!E(a.getAppType()))
      return L(
        "components"
        /* Components */
      );
  }, [a, x, s, f]), G = O(() => {
    if (!E(a.getAppType()))
      return L(
        "modals"
        /* Modals */
      );
  }, [a, x, s, f]), Q = O(() => a.bottomResComInfoList().map((n) => /* @__PURE__ */ t(v, {
    name: n.name,
    desc: n.dataDesc,
    data: n.data,
    isSelected: a.selectedBottomResName === n.name,
    onClick: () => R(n.type, n.name)
  }, n.name)), [a, R]), Y = O(() => b.sortBy(a.hooksCompInfoList().filter((n) => ie(n.type) === "hook"), [(n) => n.name]).map((n) => /* @__PURE__ */ t(v, {
    name: n.name,
    desc: n.dataDesc,
    data: n.data,
    isSelected: !1,
    onClick: b.noop
  }, n.name)), [a]), F = o.getModuleLayoutComp(), K = /* @__PURE__ */ t($, {
    children: /* @__PURE__ */ m("div", {
      style: {
        paddingBottom: 80
      },
      children: [/* @__PURE__ */ t(S, {
        name: k("leftPanel.components"),
        width: 288,
        noMargin: !0,
        children: /* @__PURE__ */ t("span", {
          className: le,
          children: z
        })
      }), /* @__PURE__ */ t(S, {
        name: k("leftPanel.modals"),
        width: 288,
        noMargin: !0,
        children: /* @__PURE__ */ t("span", {
          children: G
        })
      }), /* @__PURE__ */ t(S, {
        name: k("leftPanel.queries"),
        width: 288,
        noMargin: !0,
        children: /* @__PURE__ */ t("span", {
          children: Q
        })
      }), /* @__PURE__ */ t(S, {
        name: k("leftPanel.globals"),
        width: 288,
        noMargin: !0,
        children: /* @__PURE__ */ t("span", {
          children: Y
        })
      })]
    })
  });
  if (!F)
    return /* @__PURE__ */ t(W, {
      className: "cypress-left-content",
      children: K
    });
  const Z = [{
    key: "state",
    label: /* @__PURE__ */ t(H, {
      text: k("leftPanel.stateTab")
    }),
    children: /* @__PURE__ */ t(_, {
      children: K
    })
  }, {
    key: "module-setting",
    label: /* @__PURE__ */ t(H, {
      text: k("leftPanel.settingsTab")
    }),
    children: /* @__PURE__ */ t($, {
      children: /* @__PURE__ */ t("div", {
        style: {
          paddingBottom: 80,
          paddingTop: 16
        },
        children: /* @__PURE__ */ t(S, {
          width: 288,
          noMargin: !0,
          children: /* @__PURE__ */ t("span", {
            children: F.getConfigView()
          })
        })
      })
    })
  }];
  return /* @__PURE__ */ t(W, {
    className: "cypress-left-content",
    children: /* @__PURE__ */ t(Se, {
      defaultActiveKey: "module-setting",
      items: Z
    })
  });
};
export {
  Be as LeftContent,
  j as default
};
