import { cf as e, eQ as t, dP as n, eR as a, eS as i, ac as s, eT as o, eU as r, a8 as l, eV as c, eW as p, dc as d, eX as m, eY as h, eZ as f, e_ as y, e$ as g, f0 as j, f1 as u, f2 as k, f3 as b, f4 as x, f5 as w } from "./index-f927b013.js";
import v, { useContext as C, useState as P, useCallback as T, useMemo as O } from "react";
import { lz as A, lI as S, lJ as B } from "./ant-design-icons-6bfdc7d5.js";
import { _ as I } from "./lodash-b5661970.js";
import { u as N } from "./styled-components-7cfa37e6.js";
import { D as L, C as R, N as M } from "./styledComponents-8c5ddcad.js";
import { M as $ } from "./antd-2abdded3.js";
import "./axios-04f95181.js";
import "./redux-devtools-8dd21e4f.js";
import "./alasql-f60045ee.js";
import "./fontawesome-3904a214.js";
import "react-dom";
import "./dnd-kit-8227a2db.js";
import "./moment-059406e8.js";
import "./dayjs-2035e031.js";
import "./numbro-47982265.js";
import "./papaparse-07642d76.js";
import "./uuid-bd83cae2.js";
import "./supabase-b2e314d0.js";
import "./fetch-648a91f6.js";
import "./react-draggable-ed505bfc.js";
import "./remark-gfm-18306abe.js";
import "./buffer-d3713d77.js";
import "./rehype-raw-6ebcba88.js";
import "./parse5-f837f753.js";
import "./rehype-sanitize-953d0761.js";
import "./simplebar-react-2133d981.js";
import "./react-best-gradient-color-picker-92c01739.js";
import "./ua-parser-js-c952c07b.js";
import "./clsx-469c2c43.js";
import "./loglevel-b4003767.js";
import "./file-saver-55285fc1.js";
import "./codemirror-8412b963.js";
import "./really-relaxed-json-056be70b.js";
import "./immer-c0428a8d.js";
import "./hotkeys-js-699906bc.js";
import "./cnchar-e1339167.js";
import "./react-documents-041601c7.js";
import "./react-sortable-hoc-4fbe0c32.js";
import "./sql-formatter-577b4ab0.js";
import "./rc-trigger-3f038851.js";
import "./react-json-view-5330ce92.js";
import "./qrcode-react-d377d762.js";
const D = N.div`
  display: flex;
  width: fit-content;
  max-width: calc(100% - 8px);
`, E = N.div`
  padding: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  &:hover .copy-icon {
    visibility: visible;
  }
`;
function q(e2) {
  return "number" == typeof e2 ? (e2 + "").toString().length : "string" == typeof e2 || "boolean" == typeof e2 ? e2.toString().length : 0;
}
function X(e2, t2 = 2) {
  const n2 = /* @__PURE__ */ new Set();
  return JSON.stringify(e2, (e3, t3) => {
    if ("object" == typeof t3 && null !== t3) {
      if (n2.has(t3))
        return "[Circular]";
      n2.add(t3);
    }
    return t3;
  }, t2);
}
function z(a2, i2, s2, o2) {
  const r2 = "function" == typeof a2 ? "Function" : X(a2), l2 = {}, c2 = true === o2 ? q(r2) > 42 ? r2.slice(0, 42) + "..." : r2 : q(r2) > 20 ? r2.slice(0, 20) + "..." : r2;
  if (l2[i2] = s2, Array.isArray(a2)) {
    const e2 = {};
    return a2.forEach((t2, n2) => {
      e2[n2] = t2;
    }), A(K, { name: i2, desc: l2, data: e2, isArray: true, modal: o2 }, i2);
  }
  return I.isPlainObject(a2) ? A(K, { name: i2, desc: l2, data: a2, modal: o2 }, i2) : S(E, { style: { marginLeft: "20px", borderBottom: "1px solid #f0f0f0", height: "32px", display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [S(e, { title: s2, placement: "right", children: [A(t, { label: i2 }), " ​"] }), S("div", { style: { display: "flex", wordBreak: "break-all", textAlign: "right" }, children: [A("span", { style: { marginRight: "10px" }, children: c2 }), q(r2) > 0 && A(n, { text: a2, style: { color: "#ccc", marginRight: "0px", marginTop: "4px" } })] })] }, i2);
}
function V(e2) {
  let t2 = [], n2 = [];
  return e2.forEach((a2, i2) => {
    i2 < 15 && t2.push(a2), i2 >= e2.length - 5 && i2 < e2.length && n2.push(a2);
  }), { preArr: t2, afterArr: n2 };
}
function F(e2) {
  const t2 = Object.keys(e2.data), n2 = V;
  return A("div", { children: t2.length < 30 ? t2.map((t3) => {
    var _a;
    return z(e2.data[t3], t3, (_a = e2.desc) == null ? void 0 : _a[t3], e2.modal);
  }) : S(B, { children: [n2(t2).preArr.map((t3) => {
    var _a;
    return z(e2.data[t3], t3, (_a = e2.desc) == null ? void 0 : _a[t3], e2.modal);
  }), A(y, { num: t2.length - 6 }), n2(t2).afterArr.map((t3) => {
    var _a;
    return z(e2.data[t3], t3, (_a = e2.desc) == null ? void 0 : _a[t3], e2.modal);
  })] }) });
}
N(n)`
  visibility: hidden;
  margin-left: 8px;
  color: #1890ff;
  cursor: pointer;
`;
const K = v.memo((t2) => {
  var _a;
  const { data: o2 = {} } = t2, r2 = 1 === Object.keys(o2).length;
  return A(a, { isSelected: t2.isSelected, isOpen: t2.isOpen, config: [{ key: t2.name, title: S("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [A(e, { title: (_a = t2.desc) == null ? void 0 : _a[t2.name], placement: "right", children: S(D, { onClick: () => t2.onClick && t2.onClick(t2.name), children: [A(i, { style: { whiteSpace: "nowrap", textOverflow: "ellipsis", overflow: "hidden" }, label: t2.name, hasChild: Object.keys(o2).length > 0 }), A(i, { style: { flexShrink: 0 }, color: "#8B8FA3", label: `${t2.isArray ? "[]" : "{}"} ${s(t2.isArray ? r2 ? "leftPanel.propTipArr" : "leftPanel.propTipsArr" : r2 ? "leftPanel.propTip" : "leftPanel.propTips", { num: Object.keys(o2).length })}` })] }) }), Object.keys(o2).length > 0 && A(n, { text: X(o2), style: { color: "#aaa", marginRight: "8px" } })] }), data: F({ data: o2, desc: t2.desc, modal: t2.modal }) }] });
}), U = N(w)`
  .ant-tabs-nav {
    background-color: ${o};
    height: 40px;
    padding: 0 16px;
    margin: 0;

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

  .ant-tabs-tabpane {
    height: calc(100vh - ${r} - 40px);
  }
`, H = N.div`
  height: calc(100vh - ${r});
`, J = (t2) => {
  const { uiComp: n2 } = t2, a2 = C(l), [i2, o2] = P([]), [r2, y2] = P([]), w2 = (e2, t3, n3) => {
    const { items: a3, children: i3 } = e2;
    if (Object.keys(a3).length) {
      for (const e3 in a3) {
        const i4 = { title: a3[e3].children.name.getView(), type: a3[e3].children.compType.getView(), key: e3, children: [] };
        if (n3) {
          const e4 = b(t3, n3);
          e4 == null ? void 0 : e4.children.push(i4);
        } else
          t3.push(i4);
      }
      t3 = I.sortBy(t3, [(e3) => e3.title]);
    }
    if (Object.keys(i3).length)
      for (const e3 in i3)
        w2(i3[e3], t3, e3);
    return t3;
  }, v2 = T((e2) => {
    a2.setSelectedCompNames(/* @__PURE__ */ new Set([e2]), "leftPanel");
  }, [a2]), N2 = T((e2, t3) => {
    a2.setSelectedBottomRes(t3, e2);
  }, [a2]), D2 = (t3) => {
    const n3 = I.sortBy(a2.uiCompInfoList(), [(e2) => e2.name]), l2 = "components" === t3 ? a2.getUIComp().getTree() : a2.getHooksComp().getUITree(), c2 = w2(l2, []);
    let p2 = [];
    if (1 === a2.selectedCompNames.size) {
      const e2 = Object.keys(a2.selectedComps())[0], t4 = g(c2, e2);
      if (t4 && t4.length) {
        let e3 = false;
        t4.forEach((t5) => {
          i2.includes(t5) || (e3 = true);
        }), e3 && o2(I.union(i2, t4));
      }
      p2.push(e2);
    }
    return A(L, { treeData: c2, checkable: false, selectable: false, icon: (e2) => e2.type && A("div", { style: { margin: "16px 4px 0 -4px" }, children: R[e2.type] || A(j, {}) }), switcherIcon: (e2) => e2.expanded ? A(u, {}) : A(k, {}), expandedKeys: i2, onExpand: (e2) => o2(e2), onClick: (e2, t4) => ((e3, t5, n4) => {
      var _a, _b, _c;
      v2(t5.title + "");
      const a3 = n4.find((e4) => e4.name === t5.title);
      if (!((_a = t5.children) == null ? void 0 : _a.length) && a3 && ((_b = Object.keys(a3.data)) == null ? void 0 : _b.length) && t5.selected) {
        const n5 = r2.findIndex((e4) => e4.key === t5.key);
        let a4 = [], i3 = ((_c = e3.currentTarget) == null ? void 0 : _c.offsetLeft) + 20;
        a4 = n5 > -1 ? r2.map((e4) => e4.key === t5.key ? { key: e4.key, show: !e4.show, clientX: i3 } : e4) : [...r2, { key: t5.key + "", show: true, clientX: i3 }], y2(a4);
      }
    })(e2, t4, n3), selectedKeys: p2, titleRender: (t4) => ((t5, n4) => {
      var _a;
      const a3 = r2.find((e2) => e2.key === t5.key), i3 = n4.find((e2) => e2.name === t5.title);
      return S(M, { children: [S("span", { children: [S("span", { children: [t5.title, " "] }), i3 && !!((_a = Object.keys(i3.data)) == null ? void 0 : _a.length) && A(e, (a3 == null ? void 0 : a3.show) ? { placement: "right", title: s("leftPanel.collapseTip", { component: t5.title }), children: A("div", { title: "", className: "show-data", onClick: (e2) => {
        e2.stopPropagation();
        const n5 = r2.map((e3) => e3.key === t5.key ? { key: e3.key, show: false, clientX: void 0 } : e3);
        y2(n5);
      } }) } : { placement: "right", title: s("leftPanel.expandTip", { component: t5.title }), children: A("div", { title: "", className: "no-data", onClick: (e2) => {
        var _a2;
        e2.stopPropagation();
        const n5 = r2.findIndex((e3) => e3.key === t5.key);
        let a4 = [];
        const i4 = { key: t5.key, show: true, clientX: (_a2 = e2.currentTarget.parentElement) == null ? void 0 : _a2.offsetLeft };
        a4 = n5 > -1 ? r2.map((e3) => e3.key === t5.key ? i4 : e3) : [...r2, i4], y2(a4);
      }, children: A(x, {}) }) })] }), (a3 == null ? void 0 : a3.show) && i3 && A($, { title: i3.name, open: a3.show, onOk: () => y2([]), cancelButtonProps: { style: { display: "none" } }, closable: false, destroyOnClose: true, maskClosable: false, okText: s("modalComp.close"), children: A("div", { style: { whiteSpace: "nowrap", wordWrap: "normal", maxHeight: "calc(100vh - 400px)", overflow: "scroll" }, onClick: (e2) => e2.stopPropagation(), children: (o3 = i3.data, l3 = i3.dataDesc, A("div", { children: Object.keys(o3).map((e2) => z(o3[e2], e2, l3 == null ? void 0 : l3[e2], true)) })) }) })] }, t5.key);
      var o3, l3;
    })(t4, n3) });
  }, E2 = O(() => {
    if (!c(a2.getAppType()))
      return D2("components");
  }, [a2, v2, i2, r2]), q2 = O(() => {
    if (!c(a2.getAppType()))
      return D2("modals");
  }, [a2, v2, i2, r2]), X2 = O(() => a2.bottomResComInfoList().map((e2) => A(K, { name: e2.name, desc: e2.dataDesc, data: e2.data, isSelected: a2.selectedBottomResName === e2.name, onClick: () => N2(e2.type, e2.name) }, e2.name)), [a2, N2]), V2 = O(() => I.sortBy(a2.hooksCompInfoList().filter((e2) => "hook" === p(e2.type)), [(e2) => e2.name]).map((e2) => A(K, { name: e2.name, desc: e2.dataDesc, data: e2.data, isSelected: false, onClick: I.noop }, e2.name)), [a2]), F2 = n2.getModuleLayoutComp(), J2 = A(d, { children: S("div", { style: { paddingBottom: 80 }, children: [A(m, { name: s("leftPanel.components"), width: 288, noMargin: true, children: A("span", { className: h, children: E2 }) }), A(m, { name: s("leftPanel.modals"), width: 288, noMargin: true, children: A("span", { children: q2 }) }), A(m, { name: s("leftPanel.queries"), width: 288, noMargin: true, children: A("span", { children: X2 }) }), A(m, { name: s("leftPanel.globals"), width: 288, noMargin: true, children: A("span", { children: V2 }) })] }) });
  if (!F2)
    return A(H, { className: "cypress-left-content", children: J2 });
  const W = [{ key: "state", label: A(f, { text: s("leftPanel.stateTab") }), children: A(B, { children: J2 }) }, { key: "module-setting", label: A(f, { text: s("leftPanel.settingsTab") }), children: A(d, { children: A("div", { style: { paddingBottom: 80, paddingTop: 16 }, children: A(m, { width: 288, noMargin: true, children: A("span", { children: F2.getConfigView() }) }) }) }) }];
  return A(H, { className: "cypress-left-content", children: A(U, { defaultActiveKey: "module-setting", items: W }) });
};
export {
  J as LeftContent,
  z as default
};
