import { useState as e, useEffect as t, useContext as i } from "react";
import { u as r, a as o } from "./styled-components-7cfa37e6.js";
import { hJ as n, hK as l, hL as a, dI as s, el as d, ac as c, dN as p, dc as h, a8 as m, f1 as f, f2 as u, es as g, ab as y, fK as x, fe as b, hM as v, hN as w, ey as j, fL as C, dR as S, hO as k, hP as $, ej as q, eh as T, hQ as I, dW as z, hR as D, hS as F, hT as R, hU as N, hV as Q, fj as L, fo as A, hW as B, hX as P, hY as V, hZ as O, f8 as E, h_ as U, h$ as J, i0 as M, i1 as G, e0 as H } from "./index-f927b013.js";
import { lI as W, lz as K, lJ as Y } from "./ant-design-icons-6bfdc7d5.js";
import { D as X } from "./DraggableTree-a141a05a.js";
import { B as Z } from "./BottomMetaDrawer-db0cdfbb.js";
import { _, l as ee } from "./lodash-b5661970.js";
import { v as te } from "./antd-2abdded3.js";
import "./alasql-f60045ee.js";
import "./axios-04f95181.js";
import "./redux-devtools-8dd21e4f.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 ie = r.div`
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  background-color: #ffffff;
`, re = r.div`
  flex-shrink: 0;
  height: 40px;
  width: 100%;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
`, oe = r.span`
  font-weight: 500;
  font-size: 13px;
  color: #222222;
  line-height: 20px;
  display: inline-block;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: none;
`, ne = r.div`
  display: flex;
  align-items: center;
`, le = r.div`
  height: 28px;
  padding: 0 16px;
  margin-bottom: 4px;
  .ant-input-affix-wrapper {
    height: 28px;
  }
`, ae = r(v)`
  height: 16px;
  width: 16px;
  margin-right: 16px;
  color: #9195a3;
  cursor: pointer;
  &:hover {
    color: ${n};
  }
`, se = r(w)`
  height: 12px;
  width: 12px;
  margin-right: 2px;
`, de = r(j)`
  &&& {
    height: 24px;
    width: 64px;
    padding: 4px 12px;
    background-color: #fafbff;
    color: #4965f2;
    border-color: #c9d1fc;
    display: flex;
    align-items: center;
    box-shadow: none;
  
    &:hover {
      color: #315efb;
      background-color: #f5faff;
      border-color: #c2d6ff;
    }
  
    &:focus {
      color: #315efb;
      background-color: #f5faff;
      border-color: #c2d6ff;
    }
  
    &:hover ${se} g {
      stroke: #315efb;
    }
  
    &:disabled,
    &:disabled:hover {
      background: #f9fbff;
      border: 1px solid #dee9ff;
      border-radius: 4px;
  
      ${se} g {
        stroke: #4965f230;
      }
    }
  }
`;
function ce(i2) {
  const { items: r2, refTreeComp: o2, onOpenCreatePanel: n2, onSelect: l2, onCopy: a2, onDelete: m2 } = i2, f2 = s(d), [u2, g2] = e(false), [y2, x2] = e(""), v2 = (e2) => {
    var _a;
    const t2 = (i3 = e2.children.value.getView(), r2.find((e3) => e3.id() === i3));
    var i3;
    const o3 = t2 == null ? void 0 : t2.type(), n3 = (_a = e2.children.items) == null ? void 0 : _a.getView().map((e3) => v2(e3)).filter((e3) => !!e3), l3 = { id: t2 == null ? void 0 : t2.id(), canDropBefore: (e3) => o3 === b.Folder ? (e3 == null ? void 0 : e3.type()) === b.Folder : (e3 == null ? void 0 : e3.type()) !== b.Folder, canDropAfter: (e3) => o3 === b.Folder || (e3 == null ? void 0 : e3.type()) !== b.Folder, canDropIn: (e3) => o3 === b.Folder && (!e3 || e3.type() !== b.Folder), items: n3, data: t2, addSubItem(t3) {
      const i4 = e2.children.items.pushAction({ value: t3.id() });
      e2.children.items.dispatch(i4);
    }, deleteItem(t3) {
      const i4 = e2.children.items.deleteAction(t3);
      e2.children.items.dispatch(i4);
    }, addItem(t3) {
      const i4 = e2.children.items.pushAction({ value: t3.id() });
      e2.children.items.dispatch(i4);
    }, moveItem(t3, i4) {
      const r3 = e2.children.items.arrayMoveAction(t3, i4);
      e2.children.items.dispatch(r3);
    } };
    if (!y2 || !t2 || t2.name().toLowerCase().includes(y2.toLowerCase()) || 0 !== n3.length)
      return l3;
  }, w2 = v2(o2), j2 = o2.getAllValuesInTree(), C2 = r2.filter((e2) => !j2.includes(e2.id())).map((e2) => e2.id());
  return t(() => {
    C2.length > 0 && C2.forEach((e2) => {
      const t2 = o2.children.items.pushAction({ value: e2, items: [] });
      o2.children.items.dispatch(t2);
    });
  }, [JSON.stringify(C2)]), t(() => {
    w2 == null ? void 0 : w2.items.forEach((e2, t2) => {
      Boolean(e2.id) || (w2 == null ? void 0 : w2.deleteItem(t2));
    });
  }, [w2 == null ? void 0 : w2.items]), W(ie, { style: i2.style, children: [W(re, { children: [W(oe, { children: [c("bottomPanel.title"), " (", r2.length, ")"] }), W(ne, { children: [K(ae, { onClick: () => {
    g2(!u2), x2("");
  } }), W(de, { disabled: f2, onClick: () => {
    n2();
  }, children: [K(se, {}), c("newItem")] })] })] }), u2 && K(le, { children: K(p, { autoFocus: true, allowClear: true, value: y2, placeholder: "Search", onChange: (e2) => x2(e2.target.value), style: { marginTop: 0, height: 28 } }) }), K(h, { children: r2.length > 0 && w2 ? K("div", { style: { paddingTop: 4, paddingBottom: 100, overflow: "hidden" }, children: K(X, { node: w2, disable: !!y2, unfoldAll: !!y2, showSubInDragOverlay: false, showDropInPositionLine: false, showPositionLineDot: true, positionLineDotDiameter: 4, positionLineHeight: 1, itemHeight: 25, positionLineIndent: (e2, t2) => {
    const i3 = 2 + 30 * (e2.length - 1);
    return t2 ? i3 + 12 : i3;
  }, renderItemContent: (e2) => {
    const { node: t2, onToggleFold: i3, onDelete: r3, ...o3 } = e2, n3 = t2.data;
    if (!n3)
      return null;
    const s2 = n3.id(), d2 = n3.type();
    return K(ue, { id: s2, node: t2, resComp: n3, onToggleFold: i3, onCopy: () => a2(d2, s2), onSelect: () => l2(d2, s2), onDelete: () => {
      m2(d2, s2) && r3();
    }, ...o3 }, s2);
  } }) }) : !f2 && K(ye, { newColumn: n2 }) })] });
}
const pe = r.div`
  max-width: 100%;
  flex: 1;
  display: flex;
  padding-left: ${(e2) => 10 * e2.$level + (e2.$foldable ? 0 : 14)}px;
  border-radius: 4px;
  border: 1px solid ${(e2) => e2.$active ? l : "transparent"};
  align-items: center;
  justify-content: center;
`, he = r.div`
  width: 100%;
  height: 25px;
  display: flex;
  user-select: none;
  padding-left: 2px;
  padding-right: 15px;
  /* background-color: #ffffff; */
  /* margin: 2px 0; */
  background-color: ${(e2) => e2.$isOverlay ? "rgba(255, 255, 255, 0.11)" : ""};

  &&& {
    background-color: ${(e2) => e2.$color && !e2.$isOverlay ? "#f2f7fc" : null};
  }

  &:hover {
    background-color: #f2f7fc80;
    cursor: pointer;
  }

  .taco-edit-text-wrapper {
    width: 100%;
    height: 21px;
    line-height: 21px;
    color: #222222;
    margin-left: 0;
    font-size: 13px;
    padding-left: 0;

    &:hover {
      background-color: transparent;
    }
  }

  .taco-edit-text-input {
    width: 100%;
    height: 21px;
    line-height: 21px;
    color: #222222;
    margin-left: 0;
    font-size: 13px;
    background-color: #fdfdfd;
    border: 1px solid #3377ff;
    border-radius: 2px;

    &:focus {
      border-color: #3377ff;
      box-shadow: 0 0 0 2px #d6e4ff;
    }
  }
`, me = r(C)`
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
  color: ${a};

  &:hover {
    color: #315efb;
  }
`, fe = r.div`
  width: 12px;
  height: 12px;
  display: flex;
  margin-right: 2px;
`;
function ue(t2) {
  const { id: r2, resComp: o2, isOver: n2, isOverlay: l2, path: a2, isFolded: p2, onDelete: h2, onCopy: v2, onSelect: w2, onToggleFold: j2 } = t2, [C2, S2] = e(void 0), [k2, $2] = e(false), q2 = i(m), T2 = s(d), { selectedBottomResName: I2, selectedBottomResType: z2 } = q2, D2 = a2.length - 1, F2 = o2.type(), R2 = o2.name(), N2 = o2.icon(), Q2 = F2 === z2 && r2 === I2, L2 = F2 === b.Folder;
  return K(he, { onClick: () => {
    L2 && j2(), w2();
  }, $color: Q2, $isOverlay: l2, children: W(pe, { $active: n2 && L2, $level: D2, $foldable: L2, children: [L2 && K(fe, { children: K(p2 ? u : f, {}) }), N2, W("div", { style: { flexGrow: 1, marginRight: "8px", width: "calc(100% - 62px)" }, children: [K(g, { text: R2, forceClickIcon: L2, disabled: !Q2 || T2 || l2, onFinish: (e2) => {
    let t3 = false, i2 = R2;
    o2.rename ? (i2 = o2.rename(e2), t3 = !!i2) : (i2 = R2, t3 = q2.rename(R2, e2)), t3 && (q2.setSelectedBottomRes(i2, F2), S2(void 0));
  }, onChange: (e2) => {
    let t3 = "";
    t3 = o2.checkName ? o2.checkName(e2) : q2.checkRename(R2, e2), S2(t3);
  }, onEditStateChange: (e2) => $2(e2) }), K(y, { editorFocus: !!C2 && k2, title: C2 ? c("error") : "", content: C2, hasError: !!C2 })] }), !T2 && !l2 && K(x, { copy: L2 ? void 0 : v2, del: h2, children: K(me, { tabIndex: -1 }) })] }) });
}
const ge = r.div`
  margin: 16px 16px 0 16px;
  width: 100%;
  min-height: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px dashed #d7d9e0;
  border-radius: 4px;
  overflow: auto;
  min-width: 140px;
`, ye = (e2) => K("div", { style: { display: "flex" }, children: W(ge, { children: [K("div", { style: { color: "#b8b9bf" }, children: c("query.noQueries") }), K("span", { style: { color: "#4965f2", cursor: "pointer", margin: "0 4px" }, onClick: e2.newColumn, children: c("newItem") })] }) }), xe = r.div`
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: white;

  ${(e2) => "editor" === e2.$placement ? o`
          top: 0;
        ` : o`
          padding: 36px 0 0 0;
        `}

  .section-title {
    font-size: 13px;
    line-height: 1;
    color: ${S};
    margin-bottom: 8px;
  }

  .section {
    margin-bottom: 12px;

    &:last-child {
      margin-bottom: 0px;
    }
  }
`, be = r.div`
  height: 40px;
  display: flex;
  padding: 0 16px;
  justify-content: space-between;
  align-items: ${(e2) => "editor" === e2.$placement ? "center" : "flex-start"};

  ${(e2) => e2.$shadow ? `box-shadow: ${k};` : ""}
  .title-text {
    font-size: ${(e2) => "editor" === e2.$placement ? 16 : 18}px;
    font-weight: 500;
  }

  .title-close-btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    color: ${S};

    &:hover {
      color: ${$};
    }
  }
`, ve = r.div`
  height: calc(100% - 40px);
`, we = r.div`
  padding: 8px 16px 24px;
`, je = r.div`
  display: flex;
  gap: ${(e2) => "queryLibrary" === e2.$placement ? 12 : 8}px;
  flex-wrap: wrap;
`, Ce = (e2) => {
  let t2 = "", i2 = ee.noop, r2 = K(P, { size: "large", dataSourceType: "object" == typeof e2.identifier ? e2.identifier.type : e2.identifier });
  const o2 = { [b.TempState]: { label: c("query.tempState"), type: b.TempState }, [b.Transformer]: { label: c("query.transformer"), type: b.Transformer }, [b.DateResponder]: { label: c("query.dataResponder"), type: b.DateResponder }, [b.Folder]: { label: c("query.folder"), type: b.Folder, extra: () => ({ id: L() }) }, js: { label: c("query.executeJSCode"), type: b.Query, extra: { compType: "js" } }, libraryQuery: { label: c("query.importFromQueryLibrary"), type: b.Query, extra: { compType: "libraryQuery" } }, restApi: { label: c("query.quickRestAPI"), type: b.Query, extra: { compType: "restApi", dataSourceId: A } }, streamApi: { label: c("query.quickStreamAPI"), type: b.Query, extra: { compType: "streamApi" } }, alasql: { label: c("query.quickAlasql"), type: b.Query, extra: { compType: "alasql" } }, graphql: { label: c("query.quickGraphql"), type: b.Query, extra: { compType: "graphql", dataSourceId: B } } };
  if ("object" == typeof e2.identifier) {
    const r3 = e2.identifier;
    t2 = r3.name, i2 = () => {
      e2.onSelect(b.Query, { compType: r3.type, dataSourceId: r3.id });
    };
  } else if (o2[e2.identifier]) {
    const n2 = o2[e2.identifier];
    r2 = n2.icon ?? r2, t2 = n2.label, i2 = () => {
      const t3 = "function" == typeof n2.extra ? n2.extra() : n2.extra;
      e2.onSelect(n2.type, t3);
    };
  }
  return W(D, { onClick: i2, size: e2.size, children: [r2, t2] });
};
function Se(t2) {
  const { onSelect: i2, onClose: r2, recentlyUsed: o2, datasource: n2, placement: l2 = "editor" } = t2, [a2, d2] = e(false), [p2, m2] = e(false), f2 = s(q), u2 = s(T), { width: g2, ref: y2 } = I({ handleHeight: false }), x2 = g2 ? Math.floor((g2 + 8) / 192) : 3, v2 = "queryLibrary" !== l2 ? "small" : "middle", w2 = _.throttle((e2) => {
    const t3 = e2.target.scrollTop;
    d2(t3 > 0);
  }, 100);
  return W(xe, { $placement: l2, children: [W(be, { $shadow: a2, $placement: l2, children: [K("div", { onScroll: w2, className: "title-text", children: c("query.newQuery") }), K("div", { className: "title-close-btn", children: K(z, { onClick: r2 }) })] }), K(ve, { children: K(h, { scrollableNodeProps: { onScroll: w2 }, children: W(we, { children: [K("div", { className: "section-title", children: c("query.recentlyUsed") }), K("div", { ref: y2, className: "section", children: K(je, { $placement: l2, children: _.uniq(o2).slice(0, x2).map((e2, t3) => K(Ce, { size: v2, identifier: e2, onSelect: i2 }, t3)) }) }), "editor" === l2 && W(Y, { children: [K("div", { className: "section-title", children: c("code") }), K("div", { className: "section", children: W(je, { $placement: l2, children: [K(Ce, { size: v2, identifier: b.TempState, onSelect: i2 }), K(Ce, { size: v2, identifier: b.Transformer, onSelect: i2 }), K(Ce, { size: v2, identifier: b.DateResponder, onSelect: i2 }), K(Ce, { size: v2, identifier: "js", onSelect: i2 }), !f2 && K(Ce, { size: v2, identifier: "libraryQuery", onSelect: i2 }), K(Ce, { size: v2, identifier: b.Folder, onSelect: i2 })] }) })] }), "queryLibrary" === l2 && t2.onImport && W(Y, { children: [K("div", { className: "section-title", children: c("home.import") }), K("div", { className: "section", children: K(je, { $placement: l2, children: K(te, { accept: ".json", showUploadList: false, customRequest: (e2) => {
    t2.onImport(e2);
  }, multiple: false, children: W(D, { size: v2, children: [K(F, { width: "20px", height: "20px", style: { marginRight: "8px" } }), c("query.importFromFile")] }) }) }) })] }), K("div", { className: "section-title", children: c("query.datasource") }), K("div", { className: "section", children: W(je, { $placement: l2, children: [K(Ce, { size: v2, identifier: "restApi", onSelect: i2 }), K(Ce, { size: v2, identifier: "streamApi", onSelect: i2 }), K(Ce, { size: v2, identifier: "alasql", onSelect: i2 }), K(Ce, { size: v2, identifier: "graphql", onSelect: i2 }), n2.map((e2) => K(Ce, { size: v2, identifier: e2, onSelect: i2 }, e2.id)), (u2.orgDev || f2) && W(D, { size: v2, onClick: () => m2(true), children: [K(R, { children: K(N, {}) }), c("query.newDatasource")] })] }) })] }) }) }), K(Q, { open: p2, onCancel: () => m2(false), onCreated: () => m2(false) })] });
}
const ke = r.div`
  width: 100%;
  height: 100%;
  background: #ffffff;
  display: flex;
`, $e = r.div`
  position: relative;
  width: calc(30% - 1px);
  min-width: 248px;
  max-width: 296px;
  height: 100%;
  float: left;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
`, qe = r.div`
  width: 1px;
  height: 100%;
  background-color: #e1e3eb;
  position: relative;
  flex-shrink: 0;
`, Te = r.div`
  position: relative;
  min-width: 0;
  height: 100%;
  overflow-y: hidden;
  overflow-x: auto;
  flex-grow: 1;
`;
function Ie() {
  return W(ke, { children: [K($e, {}), K(qe, {}), K(Te, {})] });
}
const ze = () => {
  var _a, _b;
  const r2 = i(m), o2 = s(V), n2 = r2.selectedBottomResComp(), [l2, a2] = e(false), d2 = r2.getQueriesComp().getView(), p2 = r2.getTempStatesComp().getView(), h2 = r2.getTransformersComp().getView(), f2 = r2.getFoldersComp().getView(), u2 = r2.getDataRespondersComp().getView(), g2 = r2.selectedBottomResType === b.Folder, y2 = r2.rootComp.children.refTree, x2 = [...d2, ...p2, ...h2, ...f2, ...u2], v2 = x2.reverse().map((e2) => {
    var _a2;
    if (e2.type() === b.Query) {
      const t2 = o2.find((t3) => {
        var _a3;
        return t3.datasource.id === ((_a3 = e2.children.datasourceId) == null ? void 0 : _a3.getView());
      });
      return (t2 == null ? void 0 : t2.datasource) || ((_a2 = e2.children.compType) == null ? void 0 : _a2.getView());
    }
    return e2.type();
  });
  t(() => {
    r2.selectedBottomResName && a2(false);
  }, [r2.selectedBottomResName, a2]);
  const w2 = ((_a = r2.selectedQueryComp()) == null ? void 0 : _a.children.datasourceId.getView()) || "", j2 = O(w2);
  return W(ke, { className: E, children: [K($e, { children: K(De, { items: x2, onOpenCreatePanel: () => a2(true), onDelete: (e2, t2) => {
    const i2 = r2.getBottomResListComp(e2);
    return e2 === b.Folder && y2.hasChildren(t2) ? (H.error(c("query.folderNotEmpty")), false) : (i2.delete(t2), true);
  }, onCopy: (e2, t2) => {
    r2.getBottomResListComp(e2).copy(r2, t2);
  }, onSelect: (e2, t2) => {
    r2.getBottomResListComp(e2).select(r2, t2);
  } }) }), K(qe, {}), K(Te, { children: W("div", { style: { width: "100%", height: "100%", minWidth: "480px", display: "flex", flexDirection: "column" }, children: [K(U.Provider, { value: j2, children: K(J.Provider, { value: ((_b = r2.selectedQueryComp()) == null ? void 0 : _b.children.name.getView()) || "", children: n2 ? n2.getPropertyView() : Le }) }), (l2 || g2) && K(Se, { recentlyUsed: v2, datasource: o2.map((e2) => e2.datasource).filter((e2) => 2 !== e2.creationSource), onSelect: (e2, t2) => {
    const i2 = r2.getBottomResListComp(e2).add(r2, t2);
    a2(false);
    const o3 = e2 === b.Folder, n3 = g2 && !o3 ? r2.selectedBottomResName : "", l3 = o3 ? f2.length : void 0;
    r2.rootComp.children.refTree.appendRef(n3, i2, l3);
  }, onClose: () => a2(false) })] }) })] });
};
function De(e2) {
  var _a, _b;
  const { items: t2, onOpenCreatePanel: r2, onCopy: o2, onSelect: n2, onDelete: l2 } = e2, a2 = i(m), s2 = (_a = a2.selectedQueryComp()) == null ? void 0 : _a.children.datasourceId.getView(), d2 = (_b = a2.selectedQueryComp()) == null ? void 0 : _b.children.compType.getView();
  return W(Y, { children: [K(ce, { refTreeComp: a2.rootComp.children.refTree, dataSourceId: s2, items: t2, onCopy: o2, onDelete: l2, onSelect: n2, onOpenCreatePanel: r2 }), s2 && d2 && K(Z, { dataSourceId: s2, queryType: d2 })] });
}
const Fe = o`
  user-select: text;

  font-size: 13px;
  line-height: 13px;
  cursor: text;
`, Re = r.div`
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  transform: translateY(-48px);
`, Ne = r.span`
  ${Fe};
  display: block;
  margin-top: 10px;
  color: #b8b9bf;
  text-align: center;
`, Qe = r.div`
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
`, Le = W(Y, { children: [M, K(Qe, { children: W(Re, { children: [K(G, {}), K(Ne, { children: c("bottomPanel.noSelectedQuery") })] }) })] }), Ae = K(Qe, { children: W(Re, { children: [K(G, {}), K(Ne, { children: c("bottomPanel.noSelectedQuery") })] }) });
export {
  ze as BottomContent,
  Ie as BottomSkeleton,
  Le as EmptyQuery,
  Ae as EmptyQueryWithoutTab
};
