import './NewGame.css'
import React, { useContext } from 'react';
import { GamesContext } from '../../../context/games';

import DropdownList from '../../../components/DropdownList';
import { Color, WhiteStone, BlackStone } from '../../../components/Checkers';

export default function NewGame({ players, setPlayers }) {
    const games = useContext(GamesContext);
    
    const [whitePlayer, blackPlayer] = (() => {
        if (games.newGame.myColor === Color.white)
            return [players.currentUser, games.newGame.opponentName];

        if (games.newGame.myColor === Color.black)
            return [games.newGame.opponentName, players.currentUser];

        return ['', ''];
    })(); // <<-- Execute!

    /*
     * Name options
     */
    const nameOptions = !players.leaderboard.table
        ? [<option key='loading' value='…'>…loading</option>]
        : Object.keys(players.leaderboard.table).map(playerName =>
            <option key={playerName} value={playerName}>
                {players.isCurrentUser(playerName) ? 'You' : playerName}
            </option>)

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

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

    /*
     * The Component
     */
    const onSelect = (name, myColor) => {
        if (players.isCurrentUser(name))
            setPlayers(games.newGame.opponentName, myColor);
        else
            setPlayers(name, Color.opposite(myColor));
    }

    return (
        <div className='NewGame'>
            <BlackStone />
            <DropdownList selected={blackPlayer} onSelect={(name) => onSelect(name, Color.black)} optionsList={blackOptions} />
            <i>- vs -</i>
            <DropdownList selected={whitePlayer} onSelect={(name) => onSelect(name, Color.white)} optionsList={whiteOptions} />
            <WhiteStone />
        </div>
    )
}