import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
import {
  PanelContainer,
  Searchbar
} from "./chunk-SXXO7MP3.mjs";

// src/panels/echo/QueuesPanel/QueuesPanel.tsx
import React, { useMemo, useState } from "react";
import { Format } from "@dxos/echo/internal";
import { DXN } from "@dxos/keys";
import { useQueue } from "@dxos/react-client/echo";
import { Toolbar } from "@dxos/react-ui";
import { SyntaxHighlighter, createElement } from "@dxos/react-ui-syntax-highlighter";
import { DynamicTable } from "@dxos/react-ui-table";
import { mx } from "@dxos/ui-theme";
var QueuesPanel = () => {
  const [queueInput, setQueueInput] = useState("");
  const queueDxn = DXN.tryParse(queueInput);
  const queue = useQueue(queueDxn);
  const [selected, setSelected] = useState();
  const [selectedVersionObject, setSelectedVersionObject] = useState(null);
  const properties = useMemo(() => [
    {
      name: "id",
      format: Format.TypeFormat.DID,
      size: 320
    },
    {
      name: "type",
      format: Format.TypeFormat.JSON,
      title: "type"
    }
  ], []);
  const rows = useMemo(() => {
    return (queue?.objects ?? []).map((item) => ({
      id: item.id,
      type: item["@type"],
      _original: item
    }));
  }, [
    queue?.objects
  ]);
  const handleRowClicked = (row) => {
    if (!row) {
      setSelected(void 0);
      return;
    }
    const lastItem = queue?.objects[queue?.objects.length - 1];
    if (lastItem) {
      setSelectedVersionObject(null);
      setSelected(lastItem);
    }
  };
  const features = useMemo(() => ({
    selection: {
      enabled: true,
      mode: "single"
    }
  }), []);
  return /* @__PURE__ */ React.createElement(PanelContainer, {
    toolbar: /* @__PURE__ */ React.createElement(Toolbar.Root, null, /* @__PURE__ */ React.createElement(Searchbar, {
      onChange: setQueueInput
    }))
  }, /* @__PURE__ */ React.createElement("div", {
    className: "flex grow flex-col overflow-hidden divide-y divide-separator"
  }, /* @__PURE__ */ React.createElement(DynamicTable, {
    rows,
    properties,
    features,
    onRowClick: handleRowClicked
  }), /* @__PURE__ */ React.createElement("div", {
    className: mx("flex overflow-auto", "h-1/2")
  }, selected && /* @__PURE__ */ React.createElement(ObjectDataViewer, {
    object: selectedVersionObject ?? selected
  }))));
};
var ObjectDataViewer = ({ object }) => {
  const text = JSON.stringify(object, null, 2);
  const rowRenderer = ({ rows, stylesheet, useInlineStyles }) => {
    return rows.map((row, index) => {
      return createElement({
        node: row,
        stylesheet,
        style: {},
        useInlineStyles,
        key: index
      });
    });
  };
  return /* @__PURE__ */ React.createElement(SyntaxHighlighter, {
    language: "json",
    renderer: rowRenderer
  }, text);
};

// src/panels/echo/QueuesPanel/index.ts
var QueuesPanel_default = QueuesPanel;
export {
  QueuesPanel_default as default
};
//# sourceMappingURL=QueuesPanel-PRMCKL4Z.mjs.map
