ccburn

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const kind = await read($, windowAtom)
    const readings = await read($, readingsAtom)
    const isWithoutLimits = await read($, withoutLimitsAtom)
    await read($, nowAtom)
    const now = await $.clock.now()

    return drawPane($.ui.resolve(e), {
      kind,
      limit: limitOf(readings, kind),
      snapshots: snapshotsOf(readings, kind),
      isWithoutLimits,
      now,
      columns: Math.floor(e.props.bodyColumns),
      rows:
        e.props.placement === 'inline'
          ? inlineHeight(Math.floor(e.props.scroll.bodyRows))
          : Math.floor(e.props.scroll.bodyRows),
      placement: e.props.placement,
      offsetAt: machineOffset,
      onToggle: () => {
        void update($, windowAtom, current => (current === 'five_hour' ? 'seven_day' : 'five_hour'))
      },
    })
  })

export function drawPane(kit: Kit, model: PaneModel): RenderElement {
  const { Box, Text, Button, Raster } = kit
  const width = Math.max(1, model.columns)
  const name = DISPLAY_NAME[model.kind]
  const head = header(name, model.limit, model.now, model.offsetAt)
  const [usage, elapsed] = gauges(model.limit, model.now, width)
  const bar = barWidth(width)

  const gaugeRow = (row: typeof usage) => (
    <Box flexDirection="row">
      {runs(kit, padded(row.label, LABEL_WIDTH))}
      <Text> </Text>
      {runs(kit, padded(row.bar, bar))}
      <Text> </Text>
      {runs(kit, rightAligned(row.value, VALUE_WIDTH))}
    </Box>
  )

  const isInline = model.placement === 'inline'
  // Inline, rows under INLINE_ROWS mean the room is short, not that the content was.
  const chartRows = model.rows - CHROME_ROWS
  const isTooSmall = model.columns < MIN_COLUMNS || chartRows < (isInline ? 8 : MIN_ROWS - CHROME_ROWS)
  let body: RenderNode[] = []
  let bodyRows = 1

  if (!model.limit) {
    body = [<Text dimColor>{model.isWithoutLimits ? MESSAGES.withoutLimits : MESSAGES.waiting}</Text>]
  } else if (isTooSmall) {
    body = [<Text dimColor>{MESSAGES.tooSmall}</Text>]
  } else if (Raster !== undefined) {
    const percentPerHour = burnRate(model.snapshots, windowStart(model.limit), model.limit.windowHours)
    const cells = chartCells({
      limit: model.limit,
      snapshots: model.snapshots,
      percentPerHour,
      now: model.now,
      width,
      height: chartRows,
      offsetAt: model.offsetAt,
    })
    // chartCells never draws under 40 × 8; crop to the pane so nothing overflows.
    const fitted = cells.slice(0, chartRows).map(row => row.slice(0, width))
    const packed = packCells(fitted)
    body = [<Raster key="chart" columns={packed.columns} rows={packed.rows} cells={packed.cells} />]
    bodyRows = packed.rows
  } else {
    bodyRows = 0
  }

  // Inline, the pane draws exactly `rows` tall (the caller's measured room, or
  // INLINE_ROWS while it is still finding out), padding under a short body.
  const padding = isInline ? Math.max(0, model.rows - CHROME_ROWS - bodyRows) : 0

  // The window toggle rides in the header after the title, so it costs no row.
  // A header that overflows wraps onto a second row and makes the pane scroll,
  // so in a narrow pane it sheds detail until it fits on one.
  const other: WindowKind = model.kind === 'five_hour' ? 'seven_day' : 'five_hour'
  const fit = fitHeader(head, width, `Show ${DISPLAY_NAME[other]}`, SHORT_NAME[other])

  return (
    <Box flexDirection="column">
      <Box flexDirection="row">
        {runs(kit, fit.title)}
        <Text>{'  '}</Text>
        <Button key="window" label={fit.toggle} hotkey={TOGGLE_KEY} plain onPress={model.onToggle} />
        {runs(kit, rightAligned(fit.right, width - fit.leftWidth))}
      </Box>
      {gaugeRow(usage)}
      {gaugeRow(elapsed)}
      {body}
      {padding > 0 ? <Box height={padding} /> : []}
    </Box>
  )
}

function runs(kit: Kit, list: readonly Run[]): RenderNode[] {
  const { Text } = kit

  return list.map(run => (
    <Text color={run.color} bold={run.bold} dimColor={run.dim}>
      {run.text}
    </Text>
  ))
}