import type { ReactNode } from "react";

import type { Level } from "../../lib/log";
import HistoryRow from "./HistoryRow";
import { LEVEL_TAG, logClock } from "./logLineParts";

// One log line as both log viewers draw it — "Saját napló" (this tab's ring) and the admin
// diagnostics console (the server's stored log): time, level, event code, message, and the line opens
// in place to whatever detail its screen has. One component, so a level reads the same on both.
// The row frame is the history lists' (./HistoryRow): inside a NavGrid the keyboard walks the lines
// (`j`/`k`) and Enter opens one, as a click does.

export default function LogLine({
  ts,
  level,
  event,
  msg,
  open,
  onToggle,
  title,
  navIndex,
  children,
}: {
  ts: string;
  level: Level;
  event: string;
  msg: string;
  open: boolean;
  onToggle: () => void;
  /** The row button's tooltip — the admin console puts the full date there. */
  title?: string;
  /** The line's place in its NavGrid. */
  navIndex: number;
  /** The detail shown while the line is open. */
  children: ReactNode;
}) {
  const tag = LEVEL_TAG[level];
  return (
    <HistoryRow
      line
      grid="grid-cols-[6.5em_3.5em_minmax(0,1fr)] sm:grid-cols-[6.5em_3.5em_minmax(0,10em)_minmax(0,1fr)]"
      navIndex={navIndex}
      navText={`${event} ${msg}`}
      open={open}
      onToggle={onToggle}
      title={title}
      cells={
        <>
          <span className="tabular-nums text-muted">{logClock(ts)}</span>
          <span className={`font-semibold ${tag.className}`}>{tag.text}</span>
          <span className="truncate">{event}</span>
          {/* A phone has no room for a fourth column: the message takes a line of its own under the
              code, full width — sharing the code's line left it a few characters. */}
          <span className="col-span-3 truncate sm:col-span-1">{msg}</span>
        </>
      }
    >
      {children}
    </HistoryRow>
  );
}