import { createSignal, For, untrack } from 'solid-js'
import { render } from 'solid-js/web'
import { CELLS, count, glyph, harness } from '../shared/harness.js'

const ran = <T,>(v: T) => (count.runs++, v)
const [n, setN] = createSignal(0)
const cells = Array.from({ length: CELLS }, () => createSignal(0))

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

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

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

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

const root = document.getElementById('root')!
render(
  () => (
    <main>
      <Counter />
      <Grid />
    </main>
  ),
  root,
)
harness(root, { click: () => setN((v) => v + 1), tick, runs: () => count.runs })