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

import OnlineToggle from './components/OnlineToggle';
import Wobler from './components/Wobler';

import About from "./components/About"
import Games from './container/Games';
import Leaderboard from './container/Leaderboard';

import useConfigReducer from './reducer/config';
import useUserReducer from './reducer/user';
import useLeaderboardReducer from './reducer/leaderboard';
import useGamesReducer from './reducer/games';

import useUserApi from './api/user';
import useLeaderboardApi from './api/leaderboard';
import useGamesApi from './api/games';

export default function App() {
  const [config, dispatcConfig] = useConfigReducer();

  const user = useUserApi(useUserReducer()).getUser();
  const leaderboard = useLeaderboardApi(useLeaderboardReducer(), config).pollTable();

  const players = {
    leaderboard,
    isCurrentUser: (playerName) => user?.isCurrentUser(playerName) === true ? true : null
  };

  const gamesReducer = useGamesReducer();
  const gamesApi = useGamesApi(gamesReducer, config);
  const games = gamesApi.pollGamesList();

  const isPolling = {
    games: games.isPollingGamesList,
    leaderboard: leaderboard.isPollingTable
  }

  return (
    <BrowserRouter>
      <Header configReducer={[config, dispatcConfig]} isPolling={isPolling}/>
      <Routes>
        <Route path='/' element={<About />} />
        <Route path='/about' element={<About />} />
        <Route path='/games/*' element={<Games context={{ gamesReducer, gamesApi }} players={players} />} />
        <Route path='/leaderboard' element={<Leaderboard players={players} />} />
      </Routes>
    </BrowserRouter>
  )
}

function Header({ configReducer, isPolling }) {
  const [config, dispatcConfig] = configReducer;

  return (
    <div className='Header'>
      <h1>
        CordaCheckers
      </h1>

      <OnlineToggle
        isOnline={config.online}
        onClick={() => dispatcConfig({ type: 'toggleOnline' })}
      />

      <nav>
        <NavLink to='/about'>
          About
        </NavLink>

        <NavLink to='/games'>
          <Wobler text="Games" dance={isPolling.games} />
        </NavLink>

        <NavLink to='/leaderboard'>
          <Wobler text='Leaderboard' dance={isPolling.leaderboard} />
        </NavLink>
      </nav>
    </div>
  )
}