import { useState } from 'react';
import './App.css';
import useKetchup from 'ketchup-react'
import { reducer } from 'example-common'

export default function App() {
  const [proj, dispatch] = useKetchup('ws://localhost:4000', reducer)
  const [player, setPlayer] = useState<'X' | 'O'>('X')

  if (!proj) {
    return <>Loading</>
  } else {
    return <>
      <p>Playing as {player} <button onClick={() => setPlayer(player === 'X' ? 'O' : 'X')}>Change</button></p>
      <table><tbody>
        {proj.board.map((row, rIdx) =>
          <tr key={rIdx}>
            {row.map((mark, cIdx) =>
              <td key={cIdx}>
                {mark ??
                  <button onClick={() => dispatch({ type: 'play', row: rIdx, column: cIdx, mark: player })}></button>
                }
              </td>
            )}
          </tr>
        )}
      </tbody></table>
      <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
    </>
  }
}
