import { flush, state, stats } from '@weft-js/core'
import { render } from '@weft-js/core/dom'
import { CELLS, count, glyph, harness } from '../shared/harness.js'

const n = state(0)
const cells = Array.from({ length: CELLS }, () => state(0))

function Counter() {
  count.renders++
  return <button type="button" onClick={() => window.arena.press()}>{n.value}</button>
}

function Cell(props: { i: number }) {
  count.renders++
  return <i>{glyph(cells[props.i].value)}</i>
}

function Grid() {
  count.renders++
  return <div data-grid>{cells.map((_, i) => <Cell i={i} />)}</div>
}

const tick = (k: number) => {
  for (let i = k % 10; i < CELLS; i += 10) cells[i].value++
  flush()
}

const root = document.getElementById('root')!
render(() => <main><Counter /><Grid /></main>, root)
harness(root, { click: () => { n.value++; flush() }, tick, runs: () => stats.runs })