import './GameBoard.css'
import React, { useState } from 'react'
import { AppData } from '../../context/data'
import Board from './GameBoard/Board'
import { SelectPlayer } from './Player'
// import { WHITE, BLACK, WhiteStone, BlackStone } from './Stone'

export default function GameBoard() {

  const [data] = React.useContext(AppData)

  const [whiteName, setWhiteName] = useState('');
  const [blackName, setBlackName] = useState('');


  const nameOptions = data.leaderboard
    ? Object.keys(data.leaderboard).map(playerName => {
      const displayName = data.isCurrentUser(playerName) ? 'You' : playerName
      return <option key={playerName} value={playerName}>{displayName}</option>
    })
    : []

  const whiteOptions = Array(nameOptions)
  whiteOptions.push(<option key='default' value=''>{'⛀ …'}</option>)

  const blackOptions = Array(nameOptions)
  blackOptions.push(<option key='default' value=''>{'⛂ …'}</option>)


  return (
    <div className='game-board'>
      <SelectPlayer name={whiteName} setName={setWhiteName} nameOptions={whiteOptions} />
      {/* <Player color={WHITE()} name={whiteName} setName={setWhiteName} nameOptions={whiteOptions} /> */}
      <Board />
      {/* <Player color={BLACK()} name={blackName} setName={setBlackName} nameOptions={blackOptions} /> */}
      <SelectPlayer name={blackName} setName={setBlackName} nameOptions={blackOptions} />
    </div>
  )
}