import "../../LogViewerEntry.css";
import { jsxs, jsx } from "react/jsx-runtime";
import Icon from "../Icon.js";
import { capitalize, ansiToHtml } from "../internal/functions.js";
import { LogLevel } from "../internal/types.js";
import { useTheme } from "../Theme/UI.js";
import "../Theme/themeUtils.js";
import "../Theme/themes.js";
import Tooltip from "../Tooltip.js";
const base = "LogViewerEntry_base_04229";
const level = "LogViewerEntry_level_04229";
const levelLabel = "LogViewerEntry_levelLabel_04229";
const time = "LogViewerEntry_time_04229";
const message = "LogViewerEntry_message_04229";
const critical = "LogViewerEntry_critical_04229";
const debug = "LogViewerEntry_debug_04229";
const error = "LogViewerEntry_error_04229";
const trace = "LogViewerEntry_trace_04229";
const warning = "LogViewerEntry_warning_04229";
const noWrap = "LogViewerEntry_noWrap_04229";
const css = {
  base,
  level,
  levelLabel,
  time,
  message,
  critical,
  debug,
  error,
  trace,
  warning,
  noWrap
};
const ICON_WIDTH = 26;
const DATETIME_PREFIX = "[";
const DATETIME_SUFFIX = "]";
const DATETIME_FORMAT = `[${DATETIME_PREFIX}]YYYY-MM-DD HH:mm:ss${DATETIME_SUFFIX}`;
const MAX_DATETIME_LENGTH = 22;
const LogViewerEntry = ({
  level: level2 = LogLevel.None,
  message: message2,
  noWrap: noWrap2 = false,
  formattedTime,
  style
}) => {
  const {
    themeSettings: { className: themeClass }
  } = useTheme();
  const classes = [css.base, themeClass];
  const levelClasses = [css.level, css[level2]];
  const messageClasses = [css.message, css[level2]];
  if (noWrap2)
    classes.push(css.noWrap);
  return /* @__PURE__ */ jsxs("div", { className: classes.join(" "), style, tabIndex: 0, children: [
    /* @__PURE__ */ jsx(Tooltip, { content: `Level: ${capitalize(level2)}`, placement: "top", children: /* @__PURE__ */ jsxs("div", { className: levelClasses.join(" "), children: [
      /* @__PURE__ */ jsxs("div", { className: css.levelLabel, children: [
        "<[",
        level2,
        "]>"
      ] }),
      level2 !== LogLevel.None && /* @__PURE__ */ jsx(Icon, { name: level2, size: "small", title: level2 })
    ] }) }),
    /* @__PURE__ */ jsx("div", { className: css.time, children: formattedTime }),
    /* @__PURE__ */ jsx(
      "div",
      {
        className: messageClasses.join(" "),
        dangerouslySetInnerHTML: { __html: ansiToHtml(message2) }
      }
    )
  ] });
};
export {
  DATETIME_FORMAT,
  ICON_WIDTH,
  MAX_DATETIME_LENGTH,
  LogViewerEntry as default
};
