import { X as S, F as t, _ as b, a6 as m, h4 as O, j9 as ee, i3 as I, ja as te, jb as M, Y as k, jc as ne, jd as W, af as ae, je as $, jf as le, dk as E, jg as T, jh as V, G as _, ji as se, jj as ie, jk as oe, jl as re, jm as ce, jn as de, jo as he, jp as pe, jq as fe } from "./603b75d9.js";
import ye, { useContext as ge, useState as H, useCallback as U, useMemo as P } from "react";
import { l as me } from "./2effcf20.js";
import { D as ue, C as ke, N as Ce } from "./9af8e981.js";
import "react-dom";
const be = S.div`
  display: flex;
  width: fit-content;
  max-width: calc(100% - 8px);
`, we = S.div`
  padding: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  &:hover .copy-icon {
    visibility: visible;
  }
`;
S(I)`
  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, (i, s) => {
    if (typeof s == "object" && s !== null) {
      if (a.has(s))
        return "[Circular]";
      a.add(s);
    }
    return s;
  }, o);
}
function B(e, o, a, i) {
  const s = typeof e == "function" ? "Function" : q(e), f = {}, C = i === !0 ? N(s) > 42 ? s.slice(0, 42) + "..." : s : N(s) > 20 ? s.slice(0, 20) + "..." : s;
  if (f[o] = a, Array.isArray(e)) {
    const w = {};
    return e.forEach((D, x) => {
      w[x] = D;
    }), /* @__PURE__ */ t(v, {
      name: o,
      desc: f,
      data: w,
      isArray: !0,
      modal: i
    }, o);
  } else
    return b.isPlainObject(e) ? /* @__PURE__ */ t(v, {
      name: o,
      desc: f,
      data: e,
      modal: i
    }, o) : /* @__PURE__ */ m(we, {
      style: {
        marginLeft: "20px",
        borderBottom: "1px solid #f0f0f0",
        height: "32px",
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center"
      },
      children: [/* @__PURE__ */ m(O, {
        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(s) > 0 && /* @__PURE__ */ t(I, {
          text: e,
          style: {
            color: "#ccc",
            marginRight: "0px",
            marginTop: "4px"
          }
        })]
      })]
    }, o);
}
function xe(e) {
  let o = [], a = [];
  return e.forEach((i, s) => {
    s < 15 && o.push(i), s >= e.length - 5 && s < e.length && a.push(i);
  }), {
    preArr: o,
    afterArr: a
  };
}
function je(e) {
  const o = Object.keys(e.data), a = xe;
  return /* @__PURE__ */ t("div", {
    children: o.length < 30 ? o.map((i) => {
      var s;
      return B(e.data[i], i, (s = e.desc) == null ? void 0 : s[i], e.modal);
    }) : /* @__PURE__ */ m(_, {
      children: [a(o).preArr.map((i) => {
        var s;
        return B(e.data[i], i, (s = e.desc) == null ? void 0 : s[i], e.modal);
      }), /* @__PURE__ */ t(se, {
        num: o.length - 6
      }), a(o).afterArr.map((i) => {
        var s;
        return B(e.data[i], i, (s = e.desc) == null ? void 0 : s[i], e.modal);
      })]
    })
  });
}
const v = ye.memo((e) => {
  var i;
  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(O, {
          title: (i = e.desc) == null ? void 0 : i[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(I, {
          text: q(o),
          style: {
            color: "#aaa",
            marginRight: "8px"
          }
        })]
      }),
      data: je({
        data: o,
        desc: e.desc,
        modal: e.modal
      })
    }]
  });
}), Te = S(fe)`
  .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 - ${W} - 40px);
  }
`, X = S.div`
  height: calc(100vh - ${W});
`, ve = (e) => {
  const {
    uiComp: o
  } = e, a = ge(ae), [i, s] = H([]), [f, C] = H([]), w = (n, c, y) => {
    const {
      items: h,
      children: g
    } = n;
    if (Object.keys(h).length) {
      for (const l in h) {
        const r = {
          title: h[l].children.name.getView(),
          type: h[l].children.compType.getView(),
          key: l,
          children: []
        };
        if (y) {
          const d = de(c, y);
          d == null || d.children.push(r);
        } else
          c.push(r);
      }
      c = b.sortBy(c, [(l) => l.title]);
    }
    if (Object.keys(g).length)
      for (const l in g)
        w(g[l], c, l);
    return c;
  }, D = (n, c, y) => {
    var g, l, r;
    x(c.title + "");
    const h = y.find((d) => d.name === c.title);
    if (!((g = c.children) != null && g.length) && h && ((l = Object.keys(h.data)) != null && l.length) && c.selected) {
      const d = f.findIndex((u) => u.key === c.key);
      let p = [], j = ((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: j
      } : u) : p = [...f, {
        key: c.key + "",
        show: !0,
        clientX: j
      }], C(p);
    }
  }, x = U((n) => {
    a.setSelectedCompNames(/* @__PURE__ */ new Set([n]), "leftPanel");
  }, [a]), R = U((n, c) => {
    a.setSelectedBottomRes(c, n);
  }, [a]), z = (n, c) => {
    var l;
    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) => B(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 && !!((l = Object.keys(h.data)) != null && l.length) && (y != null && y.show ? /* @__PURE__ */ t(O, {
          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(O, {
          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 j = {
                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 ? j : A) : p = [...f, j], C(p);
            },
            children: /* @__PURE__ */ t(he, {})
          })
        }))]
      }), (y == null ? void 0 : y.show) && h && /* @__PURE__ */ t(pe, {
        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(), [(l) => l.name]), y = n === "components" ? a.getUIComp().getTree() : a.getHooksComp().getUITree(), h = w(y, []);
    let g = [];
    if (a.selectedCompNames.size === 1) {
      const l = Object.keys(a.selectedComps())[0], r = ie(h, l);
      if (r && r.length) {
        let d = !1;
        r.forEach((p) => {
          i.includes(p) || (d = !0);
        }), d && s(b.union(i, r));
      }
      g.push(l);
    }
    return /* @__PURE__ */ t(ue, {
      treeData: h,
      icon: (l) => l.type && /* @__PURE__ */ t("div", {
        style: {
          margin: "16px 4px 0 -4px"
        },
        children: ke[l.type] || /* @__PURE__ */ t(oe, {})
      }),
      switcherIcon: (l) => l.expanded ? /* @__PURE__ */ t(re, {}) : /* @__PURE__ */ t(ce, {}),
      expandedKeys: i,
      onExpand: (l) => s(l),
      onClick: (l, r) => D(l, r, c),
      selectedKeys: g,
      titleRender: (l) => z(l, c)
    });
  }, G = P(() => {
    if (!$(a.getAppType()))
      return L(
        "components"
        /* Components */
      );
  }, [a, x, i, f]), J = P(() => {
    if (!$(a.getAppType()))
      return L(
        "modals"
        /* Modals */
      );
  }, [a, x, i, f]), Y = P(() => 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]), Q = P(() => b.sortBy(a.hooksCompInfoList().filter((n) => le(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(E, {
    children: /* @__PURE__ */ m("div", {
      style: {
        paddingBottom: 80
      },
      children: [/* @__PURE__ */ t(T, {
        name: k("leftPanel.components"),
        width: 288,
        noMargin: !0,
        children: /* @__PURE__ */ t("span", {
          className: me,
          children: G
        })
      }), /* @__PURE__ */ t(T, {
        name: k("leftPanel.modals"),
        width: 288,
        noMargin: !0,
        children: /* @__PURE__ */ t("span", {
          children: J
        })
      }), /* @__PURE__ */ t(T, {
        name: k("leftPanel.queries"),
        width: 288,
        noMargin: !0,
        children: /* @__PURE__ */ t("span", {
          children: Y
        })
      }), /* @__PURE__ */ t(T, {
        name: k("leftPanel.globals"),
        width: 288,
        noMargin: !0,
        children: /* @__PURE__ */ t("span", {
          children: Q
        })
      })]
    })
  });
  if (!F)
    return /* @__PURE__ */ t(X, {
      className: "cypress-left-content",
      children: K
    });
  const Z = [{
    key: "state",
    label: /* @__PURE__ */ t(V, {
      text: k("leftPanel.stateTab")
    }),
    children: /* @__PURE__ */ t(_, {
      children: K
    })
  }, {
    key: "module-setting",
    label: /* @__PURE__ */ t(V, {
      text: k("leftPanel.settingsTab")
    }),
    children: /* @__PURE__ */ t(E, {
      children: /* @__PURE__ */ t("div", {
        style: {
          paddingBottom: 80,
          paddingTop: 16
        },
        children: /* @__PURE__ */ t(T, {
          width: 288,
          noMargin: !0,
          children: /* @__PURE__ */ t("span", {
            children: F.getConfigView()
          })
        })
      })
    })
  }];
  return /* @__PURE__ */ t(X, {
    className: "cypress-left-content",
    children: /* @__PURE__ */ t(Te, {
      defaultActiveKey: "module-setting",
      items: Z
    })
  });
};
export {
  ve as LeftContent,
  B as default
};
