import './Games.css';
import React from "react"
import { NavLink, Routes, Route } from "react-router-dom";

import NewGame from './games/view/NewGame';
import GameProposals from './games/view/GameProposals';
import ActiveGames from './games/view/ActiveGames';
import GamesArchive from './games/view/GamesArchive';

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';

export default function Games({ gamesReducer, user }) {

  return (
    <div className="Games">
      <div className='left-side'>
        <ViewSelector />
        <ViewProvider />
      </div>
      <div className='right-side'>
        <ActionPanel />
        <GameBoard />
        {/*
        <GameMessage />
        <GameBoard />
        <Message2Opponent /> */}
      </div>
    </div>
  )
};

function ViewSelector() {
  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() {
  return (
    <div className='ViewProvider'>
      <Routes>
        <Route path="new" element={<NewGame />} />
        <Route path="proposal" element={<GameProposals />} />
        <Route path="active" element={<ActiveGames />} />
        <Route path="archive" element={<GamesArchive />} />
      </Routes>
    </div>
  )
}

function ActionPanel() {
  return (
    <div className='ActionPanel'>
      <Routes>
        <Route path="new" element={<Create />} />
        <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>
  )
}