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

// src/panels/client/LoggingPanel/LoggingPanel.tsx
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { Format } from "@dxos/echo/internal";
import { levels, parseFilter } from "@dxos/log";
import { LogLevel } from "@dxos/protocols/proto/dxos/client/services";
import { useClient } from "@dxos/react-client";
import { useStream } from "@dxos/react-client/devtools";
import { Toolbar, useFileDownload } from "@dxos/react-ui";
var MAX_LOGS = 2e3;
var defaultEntry = {
  level: LogLevel.DEBUG,
  message: "",
  timestamp: /* @__PURE__ */ new Date(0)
};
var shortFile = (file) => file?.split("/").slice(-1).join("/");
var LoggingPanel = () => {
  const client = useClient();
  const loggingService = client?.services?.services?.LoggingService;
  if (!loggingService) {
    return null;
  }
  const [text, setText] = useState("");
  const [query, setQuery] = useState({});
  const handleSearchChange = useCallback((text2) => {
    setText(text2);
    if (!text2) {
      setQuery({});
    }
    setQuery({
      filters: parseFilter(text2)
    });
  }, []);
  const logEntry = useStream(() => loggingService.queryLogs(query), defaultEntry, [
    query
  ]);
  const [logs, setLogs] = useState([]);
  useEffect(() => {
    if (!logEntry.message) {
      return;
    }
    setLogs((logs2) => [
      ...logs2.slice(-MAX_LOGS),
      logEntry
    ]);
  }, [
    logEntry
  ]);
  const properties = useMemo(() => [
    {
      name: "timestamp",
      format: Format.TypeFormat.DateTime,
      sort: "desc",
      size: 194
    },
    {
      name: "level",
      format: Format.TypeFormat.SingleSelect,
      size: 100,
      config: {
        options: [
          {
            id: "TRACE",
            title: "TRACE",
            color: "sky"
          },
          {
            id: "DEBUG",
            title: "DEBUG",
            color: "green"
          },
          {
            id: "VERBOSE",
            title: "VERBOSE",
            color: "neutral"
          },
          {
            id: "INFO",
            title: "INFO",
            color: "blue"
          },
          {
            id: "WARN",
            title: "WARN",
            color: "orange"
          },
          {
            id: "ERROR",
            title: "ERROR",
            color: "red"
          }
        ]
      }
    },
    {
      name: "file",
      format: Format.TypeFormat.String,
      size: 160
    },
    {
      name: "message",
      format: Format.TypeFormat.String
    }
  ], []);
  const tableData = useMemo(() => {
    return logs.map((entry, index) => ({
      id: `${entry.timestamp}-${index}`,
      timestamp: entry.timestamp,
      level: Object.entries(levels).find(([, level]) => level === entry.level)?.[0].toUpperCase(),
      file: `${shortFile(entry.meta?.file)}:${entry.meta?.line}`,
      message: entry.message,
      context: entry.context
    }));
  }, [
    logs
  ]);
  const presets = useMemo(() => [
    {
      value: "trace",
      label: "Trace"
    },
    {
      value: "debug",
      label: "Debug"
    },
    {
      value: "verbose",
      label: "Verbose"
    },
    {
      value: "info",
      label: "Info"
    },
    {
      value: "warn",
      label: "Warn"
    },
    {
      value: "error",
      label: "Error"
    },
    // TOOD(burdon): Factor out. Move to separate pull down.
    {
      value: "info,echo-edge-replicator:debug",
      label: "EDGE Replication"
    }
  ], []);
  const fileDownload = useFileDownload();
  const handleDownload = useCallback(async () => {
    const payload = {
      filters: text,
      logs: logs.map((entry) => entry)
    };
    fileDownload(new Blob([
      JSON.stringify(payload, void 0, 2)
    ], {
      type: "text/plain"
    }), `${(/* @__PURE__ */ new Date()).toISOString().replace(/\W/g, "-")}-logs.json`);
  }, [
    logs,
    text,
    fileDownload
  ]);
  return /* @__PURE__ */ React.createElement(PanelContainer, {
    toolbar: /* @__PURE__ */ React.createElement(Toolbar.Root, null, /* @__PURE__ */ React.createElement(Select, {
      items: presets,
      onValueChange: handleSearchChange
    }), /* @__PURE__ */ React.createElement(Searchbar, {
      placeholder: 'Filter (e.g., "info", "client:debug")',
      value: text,
      onChange: handleSearchChange
    }), /* @__PURE__ */ React.createElement(Toolbar.IconButton, {
      icon: "ph--download--regular",
      iconOnly: true,
      onClick: handleDownload,
      label: "Download logs"
    }), /* @__PURE__ */ React.createElement(Toolbar.IconButton, {
      icon: "ph--x--regular",
      iconOnly: true,
      onClick: () => setLogs([]),
      label: "Clear logs"
    }))
  }, /* @__PURE__ */ React.createElement(MasterDetailTable, {
    properties,
    data: tableData,
    detailsPosition: "bottom"
  }));
};

// src/panels/client/LoggingPanel/index.ts
var LoggingPanel_default = LoggingPanel;
export {
  LoggingPanel_default as default
};
//# sourceMappingURL=LoggingPanel-4FRWBSIO.mjs.map
