import React, { useState, useEffect } from 'react';
import './Leaderboard.css';
//const Leaderboard = ({hashmap}) => {

// var listItems = Object.keys(hashmap).map(playerName => {
//   var rank = hashmap[playerName];

//   return <li key={playerName}>
//     {playerName}: played {rank.gamesPlayed}, won {rank.gamesWon}, draw {rank.gamesDraw}
//   </li>
// });

// return <ul>{listItems}</ul>;

const Leaderboard = () => {

  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/leaderboard')
      .then((response) => response.json())
      .then((data) => {
        setData(data);
      })
      .catch((err) => {
        console.log(err.message);
      });
  }, []);

  if (data == null) 
    return <span>Loading...</span>

  const tableRows = Object.keys(data).map(playerName => {
    var rank = data[playerName];

    return (
      <tr key={playerName}>
        <td>{playerName}</td>
        <td>{rank.gamesPlayed}</td>
        <td>{rank.gamesWon}</td>
        <td>{rank.gamesDraw}</td>
      </tr>
    );
  });

  return (
    <div className="Leaderboard">
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Played</th>
            <th>Won</th>
            <th>Draw</th>
          </tr>
        </thead>
        <tbody>
          { tableRows }
        </tbody>
      </table>
    </div>
  );
};


export default Leaderboard;