import { slotsFor } from "@/components/Common/UplotChart"
import { useBoundValues } from "./dataContext"
import { usePalette } from "./settings"
import { useUi } from "./ui"
import { rowsOf } from "./ui/core/config"
import { barReadings } from "./ui/core/values"
import type { WidgetProps } from "./widgets"

/**
 * Several readings on one tile, a row each.
 *
 * It used to be one reading with up to three nested inside its own fill — the
 * PV share of an inverter's input drawn within the input. That said one thing
 * well, containment, and everything else badly: the nested readings all had to
 * share a single colour to stay legible against the fill, three was the
 * ceiling, and none of them could carry a scale of its own.
 *
 * A row each says the same thing where it is true — two rows on one scale
 * still read as a share, because the shorter bar *is* the smaller part — and
 * says the things the old shape could not: a battery percentage beside a load
 * in kW, told apart by the dashboard's own data colours rather than by a
 * gutter. Documents written the old way are read as rows (`rowsOf`).
 */
export function BarWidget({ widget }: WidgetProps) {
  const { Bar } = useUi()
  const rows = rowsOf(widget).filter((row) => row.message)
  const live = useBoundValues(rows.map((row) => row.message as string))
  // The dashboard's own data colours, in the order a chart would take them, so
  // a bar and a chart of the same readings agree about which line is which.
  const colors = slotsFor(rows.length, usePalette())

  if (rows.length === 0) {
    return <p className="text-muted-foreground">Pick a message.</p>
  }

  return (
    <Bar
      label={widget.title || "Readings"}
      rows={barReadings(widget, live, colors)}
    />
  )
}