import './App.css';
import React, { useState, useEffect, useCallback } from 'react';
import {
  BrowserRouter,
  Routes, //replaces "Switch" used till v5
  Route,
} from "react-router-dom";

import Header from "./Header"
import Leaderboard from "./Leaderboard";
import GameProposal from "./GameProposal";

function App() { 
  const [games, setGames] = useState(null);
  const [polling, setPolling] = useState(false);

  const pollGames = useCallback(() => { 
    console.log('start polling..');
    
    if (polling) {
      console.log(' ..already in progress');
      return;
    }

    setPolling(true);
    fetch('/api/gamestate')
      .then(response => response.json())
      .then(data => {
        console.log('poooled');
        setGames(data);
        setPolling(false);
      })
      .catch(err => console.log(err.message));
  }, [polling]);

  useEffect(() => {
    const timer = setInterval(pollGames(), 35 * 1000);
    return clearInterval(timer);
  }, [pollGames])

  return (
    <div className="App">
      <BrowserRouter>
        <Header/>
        <div className="Container">
          <Routes>
            <Route path="/leaderboard" element={<Leaderboard/>} />
            <Route path="/gameproposal" element={<GameProposal games={games}/>} />
          </Routes>
        </div>

      </BrowserRouter>
    </div>
  );
}

export default App;