import { useState, useEffect } from 'react';
import { gameInfo } from '../domain/GGSHService';
import { useGameId } from '../domain/gameStore';

export default () => {
  const gameId = useGameId();
  const [scores, setScores] = useState(null);

  useEffect(() => {
    // define how to fetch scores
    const fetchInfo = async () => {
      const { players } = await gameInfo();
      // TODO would be nice to only setScores on a change - maybe have back-end provide timestamp?
      setScores(players);
    };
    // when the hook triggers, fetch the game info
    fetchInfo();
    // and do it again every 5 seconds after
    const interval = setInterval(() => fetchInfo(), 5000);
    // and return a clean-up callback
    return () => { clearInterval(interval) };
  }, [gameId]);

  return scores;
}