// m13 life view: live cells as squares, and a status strip under the board.
import { LW, LH, LCELL, STRIP } from './model.js'
/** @import { LifeState, Scene, Shape, Align } from '../types' */

/** @type {(x: number, y: number, w: number, h: number, color: string) => Shape} */
const rect = (x, y, w, h, color) => ({ tag: 'Rect', x, y, w, h, color })
/** @type {(x: number, y: number, str: string, align: Align) => Shape} */
const text = (x, y, str, align) => ({ tag: 'Text', x, y, text: str, color: '#ffffff', size: 14, align })

const W = LW * LCELL
const H = LH * LCELL

/** @type {(state: LifeState) => Scene} */
export const lifeView = (state) => [
  rect(0, 0, W, H, '#111111'),
  ...state.cells.map((p) => rect(p.x * LCELL + 1, p.y * LCELL + 1, LCELL - 2, LCELL - 2, '#7cb342')),
  rect(0, H, W, STRIP, '#222222'),
  text(6, H + 17, `Generation ${state.generation}`, 'left'),
  text(W - 6, H + 17, state.running ? 'Running: Space pauses' : 'Paused: Space runs, N steps', 'right'),
]