import type { ReactNode } from "react";

import { navItemAttrs } from "../lib/listNav";
import { Pressable } from "./ui/Pressable";

// One dense row of a history list — a background run, an admin action, a log line (./LogLine draws
// its lines through this): its cells on one line, and the row opens in place to its details. One frame
// for all of them, so a row opens, announces itself and takes the keyboard the same on every tab.
// Inside a NavGrid the keyboard walks the rows (`j`/`k`) and Enter opens one.

export default function HistoryRow({
  cells,
  grid,
  navIndex,
  navText,
  open,
  onToggle,
  title,
  line = false,
  children,
}: {
  /** The row's cells, laid out by `grid`. */
  cells: ReactNode;
  /** The grid's column template classes (phone first, then wider screens). */
  grid: string;
  navIndex: number;
  /** What the keyboard's type-ahead matches. */
  navText: string;
  open: boolean;
  onToggle: () => void;
  /** The row button's tooltip — the full date. */
  title?: string;
  /** A log line: tighter, its cells on one text baseline, its size the (monospace) list's own. */
  line?: boolean;
  /** The detail shown while the row is open. */
  children: ReactNode;
}) {
  return (
    <div
      className="border-b border-border/50 last:border-b-0"
      {...navItemAttrs(navIndex, navText, { inset: true })}
    >
      <Pressable
        selectable
        layer={!open}
        data-nav-open
        aria-expanded={open}
        onClick={onToggle}
        title={title}
        className={`grid w-full gap-x-2 px-3 text-left touch-target pointer-coarse:content-center ${
          line ? "items-baseline py-1" : "items-center py-1.5 text-xs"
        } ${grid} ${open ? "bg-accent/10" : ""}`}
      >
        {cells}
      </Pressable>
      {open && (
        <div className={`bg-accent/5 px-3 py-2 text-muted ${line ? "" : "text-xs"}`}>
          {children}
        </div>
      )}
    </div>
  );
}