import React from 'react';
import { GamesContext } from '../context/games';
import { NavLink, Routes, Route } from 'react-router-dom';

import NewGame from './games/view/NewGame';
import GameSelector from './games/view/GameSelector';

import Create from './games/action/Create';
import Reject from './games/action/Reject';
import Cancel from './games/action/Cancel';
import Accept from './games/action/Accept';
import DrawReq from './games/action/DrawReq';
import DrawAcq from './games/action/DrawAcq';
import Surrender from './games/action/Surrender';
import Backward from './games/action/Backward';
import Forward from './games/action/Forward';

import GameBoard from './games/GameBoard';
import Message2Opponent from './games/Message2Opponent';

import './Games.css';

export default function Games({ context: { gamesReducer, gamesApi }, players }) {
  const [games, dispatchGames] = gamesReducer;

  return (
    <GamesContext.Provider value={games} >
      <div className='Games'>
        <div className='left-side'>
          <ViewSelector />
          <ViewProvider gamesReducer={gamesReducer} players={players} />
        </div>
        <div className='right-side'>
          <ActionPanel gamesApi={gamesApi} players={players} />
          <GameBoard />
          <Message2Opponent dispatchGames={dispatchGames} />
          {/*
          <GameMessage />
           */}
        </div>
      </div >
    </GamesContext.Provider>
  )
};

function ViewSelector() {
  // TODO: counter Wating for YOU

  return (
    <nav className='ViewSelector'>
      <NavLink to='new'>New</NavLink>
      <NavLink to='proposal'>Proposal</NavLink>
      <NavLink to='active'>Active</NavLink>
      <NavLink to='archive'>Archive</NavLink>
    </nav>
  )
}

function ViewProvider({ gamesReducer, players }) {
  const [/*games*/, dispatchGames] = gamesReducer;

  return (
    <div className='ViewProvider'>
      <Routes>

        <Route path='new' element={
          <NewGame
            onSelectPlayer={(whitePlayer, blackPlayer) => {
              dispatchGames({ type: 'nextNewGame', whitePlayer, blackPlayer })
            }}
            players={players}
          />
        } />

        <Route path='proposal' element={
          <GameSelector
            yours='GAME_PROPOSAL_WAIT_FOR_YOU'
            opponents='GAME_PROPOSAL_WAIT_FOR_OPPONENT'
            onClick={(uuid) => console.log("GameProposal", uuid)}
          />
        } />

        <Route path='active' element={<GameSelector />} />
        <Route path='archive' element={<GameSelector />} />
      </Routes>
    </div>
  )
}

function ActionPanel({ players, gamesApi }) {
  return (
    <div className='ActionPanel'>
      <Routes>
        <Route path='new' element={
          <Create isCurrentUser={players.isCurrentUser}
            pushNewGame={(reqParams) => gamesApi.pushNewGame(reqParams)}
          />
        } />
        <Route path='proposal' element={[<Accept key={1} />, <Reject key={2} />, <Cancel key={3} />]} />
        <Route path='active' element={[<DrawReq key={1} />, <DrawAcq key={2} />, <Surrender key={3} />]} />
        <Route path='archive' element={[<Backward key={1} />, <Forward key={2} />]} />
      </Routes>
    </div>
  )
}