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

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

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

import useConfigReducer from './reducer/config';

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();
  const leaderboard = useLeaderboardApi();
  const games = useGamesApi();

  user.api.useGetUser();
  leaderboard.api.useTablePolling(config);
  games.api.useGamesPolling(config);


  const players = {
    user: user.state,
    leaderboard: leaderboard.state,
  };

  const isPolling = {
    games: games.guide.isPolling,
    leaderboard: leaderboard.guide.isPolling
  }

  return (
    <BrowserRouter>
      <Header configReducer={[config, dispatcConfig]} isPolling={isPolling}/>
      <Routes>
        <Route path='/about' element={<About />} />
        <Route path='/games/*' element={<Games games={games} players={players} />} />
        <Route path='/leaderboard' element={<Leaderboard players={players} />} />
        <Route path="*" element={<Navigate to="/games" replace />}
        />
      </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>
  )
}