import { cB as e, fN as t, e1 as n, fO as i, fP as a, av as s, fQ as r, fR as o, cr as l, fS as c, fT as p, fU as d, fV as m, fW as h, fX as f, fY as y, fZ as g, f_ as j, f$ as k, g0 as u, g1 as x, g2 as b, g3 as w } from "./index-2be62fff.js";
import v, { useContext as C, useState as T, useCallback as O, useMemo as P } from "react";
import { lA as A, lR as S, lS as B } from "./ant-design-icons-14ab96af.js";
import { _ as I } from "./lodash-226cb5b1.js";
import { d as N } from "./styled-components-c6abe9a3.js";
import { D as R, C as L, N as M } from "./styledComponents-62dcbced.js";
import { x as D } from "./antd-97b654da.js";
import "./axios-125479b5.js";
import "./redux-devtools-f8b1cd80.js";
import "./alasql-f59e855e.js";
import "./react-router-8d1fc2f1.js";
import "./fontawesome-89eb6278.js";
import "react-dom";
import "./dnd-kit-e67c9595.js";
import "./moment-d8baa15a.js";
import "./crypto-js-8020edb5.js";
import "./dayjs-7fc5ce65.js";
import "./numbro-48e81844.js";
import "./papaparse-088c0adc.js";
import "./uuid-82f303b2.js";
import "./supabase-2e4a9112.js";
import "./fetch-6a200310.js";
import "./react-draggable-fda4f1cb.js";
import "./remark-gfm-e9b5dec7.js";
import "./buffer-e20f80c8.js";
import "./rehype-raw-41b6145f.js";
import "./parse5-6476676e.js";
import "./rehype-sanitize-deb53e9a.js";
import "./simplebar-react-cab52c82.js";
import "./react-best-gradient-color-picker-812be7ee.js";
import "./ua-parser-js-1d18a3f8.js";
import "./clsx-469c2c43.js";
import "./loglevel-5e7e37fc.js";
import "./codemirror-edf161cb.js";
import "./really-relaxed-json-e5391d6a.js";
import "./immer-c0428a8d.js";
import "./redux-saga-1b0a458d.js";
import "./hotkeys-js-0dddb21a.js";
import "./cnchar-8c3eaa86.js";
import "./react-documents-ae08f8b5.js";
import "./sql-formatter-69e8df59.js";
import "./rc-trigger-9e54e169.js";
import "./react-json-view-364658b4.js";
import "./qrcode-react-e4f7745b.js";
import "./katex-cda5b990.js";
import "./ecogis-maps-10bb29cf.js";
import "./devextreme-28d23085.js";
import "./exceljs-1678d36b.js";
import "./file-saver-es-c18fae8f.js";
const E = N.div`
  display: flex;
  width: fit-content;
  max-width: calc(100% - 8px);
`, $ = 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 z(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 X(i2, a2, s2, r2) {
  const o2 = "function" == typeof i2 ? "Function" : z(i2), l2 = {}, c2 = true === r2 ? q(o2) > 42 ? o2.slice(0, 42) + "..." : o2 : q(o2) > 20 ? o2.slice(0, 20) + "..." : o2;
  if (l2[a2] = s2, Array.isArray(i2)) {
    const e2 = {};
    return i2.forEach((t2, n2) => {
      e2[n2] = t2;
    }), A(V, { name: a2, desc: l2, data: e2, isArray: true, modal: r2 }, a2);
  }
  return I.isPlainObject(i2) ? A(V, { name: a2, desc: l2, data: i2, modal: r2 }, a2) : S($, { 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: a2 }), " ​"] }), S("div", { style: { display: "flex", wordBreak: "break-all", textAlign: "right" }, children: [A("span", { style: { marginRight: "10px" }, children: c2 }), q(o2) > 0 && A(n, { text: i2, style: { color: "#ccc", marginRight: "0px", marginTop: "4px" } })] })] }, a2);
}
function H(e2) {
  let t2 = [], n2 = [];
  return e2.forEach((i2, a2) => {
    a2 < 15 && t2.push(i2), a2 >= e2.length - 5 && a2 < e2.length && n2.push(i2);
  }), { preArr: t2, afterArr: n2 };
}
function K(e2) {
  const t2 = Object.keys(e2.data), n2 = H;
  return A("div", { children: t2.length < 30 ? t2.map((t3) => {
    var _a;
    return X(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 X(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 X(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 V = v.memo((t2) => {
  var _a;
  const { data: r2 = {} } = t2, o2 = 1 === Object.keys(r2).length;
  return A(i, { 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(E, { onClick: () => t2.onClick && t2.onClick(t2.name), children: [A(a, { style: { whiteSpace: "nowrap", textOverflow: "ellipsis", overflow: "hidden" }, label: t2.name, hasChild: Object.keys(r2).length > 0 }), A(a, { style: { flexShrink: 0 }, color: "#8B8FA3", label: `${t2.isArray ? "[]" : "{}"} ${s(t2.isArray ? o2 ? "leftPanel.propTipArr" : "leftPanel.propTipsArr" : o2 ? "leftPanel.propTip" : "leftPanel.propTips", { num: Object.keys(r2).length })}` })] }) }), Object.keys(r2).length > 0 && A(n, { text: z(r2), style: { color: "#aaa", marginRight: "8px" } })] }), data: K({ data: r2, desc: t2.desc, modal: t2.modal }) }] });
}), F = N(w)`
  .ant-tabs-nav {
    background-color: ${r};
    height: 40px;
    padding: 0 16px;
    margin: 0;

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

  .ant-tabs-tabpane {
    height: calc(100vh - ${o} - 40px);
  }
`, U = N.div`
  height: calc(100vh - ${o});
`, W = (t2) => {
  const { uiComp: n2 } = t2, i2 = C(l), [a2, r2] = T([]), [o2, y2] = T([]), w2 = (e2, t3, n3) => {
    const { items: i3, children: a3 } = e2;
    if (Object.keys(i3).length) {
      for (const e3 in i3) {
        const a4 = { title: i3[e3].children.name.getView(), type: i3[e3].children.compType.getView(), key: e3, children: [] };
        if (n3) {
          const e4 = x(t3, n3);
          e4 == null ? void 0 : e4.children.push(a4);
        } else
          t3.push(a4);
      }
      t3 = I.sortBy(t3, [(e3) => e3.title]);
    }
    if (Object.keys(a3).length)
      for (const e3 in a3)
        w2(a3[e3], t3, e3);
    return t3;
  }, v2 = O((e2) => {
    i2.setSelectedCompNames(/* @__PURE__ */ new Set([e2]), "leftPanel");
  }, [i2]), N2 = O((e2, t3) => {
    i2.setSelectedBottomRes(t3, e2);
  }, [i2]), E2 = (t3) => {
    const n3 = I.sortBy(i2.uiCompInfoList(), [(e2) => e2.name]), l2 = "components" === t3 ? i2.getUIComp().getTree() : i2.getHooksComp().getUITree(), c2 = w2(l2, []);
    let p2 = [];
    if (1 === i2.selectedCompNames.size) {
      const e2 = Object.keys(i2.selectedComps())[0], t4 = g(c2, e2);
      if (t4 && t4.length) {
        let e3 = false;
        t4.forEach((t5) => {
          a2.includes(t5) || (e3 = true);
        }), e3 && r2(I.union(a2, t4));
      }
      p2.push(e2);
    }
    return A(R, { treeData: c2, checkable: false, selectable: false, icon: (e2) => e2.type && A("div", { style: { margin: "16px 4px 0 -4px" }, children: L[e2.type] || A(j, {}) }), switcherIcon: (e2) => e2.expanded ? A(k, {}) : A(u, {}), expandedKeys: a2, onExpand: (e2) => r2(e2), onClick: (e2, t4) => ((e3, t5, n4) => {
      var _a, _b, _c;
      v2(t5.title + "");
      const i3 = n4.find((e4) => e4.name === t5.title);
      if (!((_a = t5.children) == null ? void 0 : _a.length) && i3 && ((_b = Object.keys(i3.data)) == null ? void 0 : _b.length) && t5.selected) {
        const n5 = o2.findIndex((e4) => e4.key === t5.key);
        let i4 = [], a3 = ((_c = e3.currentTarget) == null ? void 0 : _c.offsetLeft) + 20;
        i4 = n5 > -1 ? o2.map((e4) => e4.key === t5.key ? { key: e4.key, show: !e4.show, clientX: a3 } : e4) : [...o2, { key: t5.key + "", show: true, clientX: a3 }], y2(i4);
      }
    })(e2, t4, n3), selectedKeys: p2, titleRender: (t4) => ((t5, n4) => {
      var _a;
      const i3 = o2.find((e2) => e2.key === t5.key), a3 = n4.find((e2) => e2.name === t5.title);
      return S(M, { children: [S("span", { children: [S("span", { children: [t5.title, " "] }), a3 && !!((_a = Object.keys(a3.data)) == null ? void 0 : _a.length) && A(e, (i3 == null ? void 0 : i3.show) ? { placement: "right", title: s("leftPanel.collapseTip", { component: t5.title }), children: A("div", { title: "", className: "show-data", onClick: (e2) => {
        e2.stopPropagation();
        const n5 = o2.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 = o2.findIndex((e3) => e3.key === t5.key);
        let i4 = [];
        const a4 = { key: t5.key, show: true, clientX: (_a2 = e2.currentTarget.parentElement) == null ? void 0 : _a2.offsetLeft };
        i4 = n5 > -1 ? o2.map((e3) => e3.key === t5.key ? a4 : e3) : [...o2, a4], y2(i4);
      }, children: A(b, {}) }) })] }), (i3 == null ? void 0 : i3.show) && a3 && A(D, { title: S("div", { children: [A("div", { children: a3.name }), S("div", { style: { fontSize: "12px", color: "#666", fontWeight: "normal", marginTop: "4px" }, children: [A("strong", { children: "Type:" }), " ", a3.type] })] }), open: i3.show, onOk: () => y2([]), cancelButtonProps: { style: { display: "none" } }, closable: false, destroyOnHidden: 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: (r3 = a3.data, l3 = a3.dataDesc, A("div", { children: Object.keys(r3).map((e2) => X(r3[e2], e2, l3 == null ? void 0 : l3[e2], true)) })) }) })] }, t5.key);
      var r3, l3;
    })(t4, n3) });
  }, $2 = P(() => {
    if (!c(i2.getAppType()))
      return E2("components");
  }, [i2, v2, a2, o2]), q2 = P(() => {
    if (!c(i2.getAppType()))
      return E2("modals");
  }, [i2, v2, a2, o2]), z2 = P(() => i2.bottomResComInfoList().map((e2) => A(V, { name: e2.name, desc: e2.dataDesc, data: e2.data, isSelected: i2.selectedBottomResName === e2.name, onClick: () => N2(e2.type, e2.name) }, e2.name)), [i2, N2]), H2 = P(() => I.sortBy(i2.hooksCompInfoList().filter((e2) => "hook" === p(e2.type)), [(e2) => e2.name]).map((e2) => A(V, { name: e2.name, desc: e2.dataDesc, data: e2.data, isSelected: false, onClick: I.noop }, e2.name)), [i2]), K2 = n2.getModuleLayoutComp(), W2 = 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: $2 }) }), 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: z2 }) }), A(m, { name: s("leftPanel.globals"), width: 288, noMargin: true, children: A("span", { children: H2 }) })] }) });
  if (!K2)
    return A(U, { className: "cypress-left-content", children: W2 });
  const J = [{ key: "state", label: A(f, { text: s("leftPanel.stateTab") }), children: A(B, { children: W2 }) }, { 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: K2.getConfigView() }) }) }) }) }];
  return A(U, { className: "cypress-left-content", children: A(F, { defaultActiveKey: "module-setting", items: J }) });
};
export {
  W as LeftContent,
  X as default
};
