import { b9 as I, V as e, hF as Y, g$ as S, P as u, hG as v, a0 as g, hH as Z, hI as H, bg as ee, hJ as $, c1 as C, hK as te, d6 as O, hL as x, hM as ne, hN as K, bh as U, hO as ae, hP as le, hQ as se, hR as oe, hS as re, hT as ie, hU as ce, hV as M, hW as de, hX as he, hY as pe, hZ as fe, h_ as ye } from "./684d2f28.js";
import me, { useContext as ge, useState as E, useCallback as V, useMemo as A } from "react";
import { D as ue, C as ke, N as Ce, a as be } from "./bf87bf48.js";
import "react-dom";
const we = I.div`
  display: flex;
  width: fit-content;
  max-width: calc(100% - 8px);
`;
function B(t) {
  return typeof t == "number" ? (t + "").toString().length : typeof t == "string" || typeof t == "boolean" ? t.toString().length : 0;
}
function D(t, o, s) {
  const l = typeof t == "function" ? "Function" : ie(t), i = {};
  if (i[o] = s, Array.isArray(t)) {
    const f = {};
    return t.forEach((b, P) => {
      f[P] = b;
    }), /* @__PURE__ */ e(T, {
      name: o,
      desc: i,
      data: f,
      isArray: !0
    }, o);
  } else if (C.isPlainObject(t))
    return /* @__PURE__ */ e(T, {
      name: o,
      desc: i,
      data: t
    }, o);
  return /* @__PURE__ */ u(ce, {
    children: [/* @__PURE__ */ u(S, {
      title: s,
      placement: "right",
      children: [/* @__PURE__ */ e(M, {
        label: o
      }), "​"]
    }), /* @__PURE__ */ u(S, {
      title: B(l) > 50 ? /* @__PURE__ */ u("div", {
        style: {
          display: "flex",
          wordBreak: "break-all"
        },
        children: [B(l) > 300 ? l.slice(0, 300) + "..." : l, /* @__PURE__ */ e(de, {
          text: t,
          style: {
            color: "#fff",
            margin: "4px 0 0 6px"
          }
        })]
      }) : null,
      placement: "right",
      children: ["​", /* @__PURE__ */ e(M, {
        color: "#FF9816",
        label: B(l) > 50 ? l.slice(0, 50) + "..." : l
      })]
    })]
  }, o);
}
function xe(t) {
  let o = [], s = [];
  return t.forEach((l, i) => {
    i < 15 && o.push(l), i >= t.length - 5 && i < t.length && s.push(l);
  }), {
    preArr: o,
    afterArr: s
  };
}
function Te(t) {
  const o = Object.keys(t.data), s = xe;
  return /* @__PURE__ */ e("div", {
    children: o.length < 30 ? o.map((l) => {
      var i;
      return D(t.data[l], l, (i = t.desc) == null ? void 0 : i[l]);
    }) : /* @__PURE__ */ u(U, {
      children: [s(o).preArr.map((l) => {
        var i;
        return D(t.data[l], l, (i = t.desc) == null ? void 0 : i[l]);
      }), /* @__PURE__ */ e(ae, {
        num: o.length - 6
      }), s(o).afterArr.map((l) => {
        var i;
        return D(t.data[l], l, (i = t.desc) == null ? void 0 : i[l]);
      })]
    })
  });
}
const T = me.memo((t) => {
  var l;
  const {
    data: o = {}
  } = t, s = Object.keys(o).length === 1;
  return /* @__PURE__ */ e(Y, {
    isSelected: t.isSelected,
    isOpen: t.isOpen,
    config: [{
      key: t.name,
      title: /* @__PURE__ */ e(S, {
        title: (l = t.desc) == null ? void 0 : l[t.name],
        placement: "right",
        children: /* @__PURE__ */ u(we, {
          onClick: () => t.onClick && t.onClick(t.name),
          children: [/* @__PURE__ */ e(v, {
            style: {
              whiteSpace: "nowrap",
              textOverflow: "ellipsis",
              overflow: "hidden"
            },
            label: t.name,
            hasChild: Object.keys(o).length > 0
          }), /* @__PURE__ */ e(v, {
            style: {
              flexShrink: 0
            },
            color: "#8B8FA3",
            label: `${t.isArray ? "[]" : "{}"} ${g(t.isArray ? s ? "leftPanel.propTipArr" : "leftPanel.propTipsArr" : s ? "leftPanel.propTip" : "leftPanel.propTips", {
              num: Object.keys(o).length
            })}`
          })]
        })
      }),
      data: Te({
        data: o,
        desc: t.desc
      })
    }]
  });
}), Se = I(ye)`
  .ant-tabs-nav {
    background-color: ${Z};
    height: 40px;
    padding: 0 16px;
    margin: 0;

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

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