import React, { FC, useEffect, useState, useCallback } from "react";
import { DataSource, UserDataStore, UserRanking } from "./lib";

export const UserLeagueTable: FC = () => {

  const [users, setUsers] = useState()
  const [moreUsers, setMoreUsers] = useState()

  useEffect(() => {
    async function getUsers() {
      await DataSource.fetch().then(users => {
        const usersArray = Object.keys(users).map(user => users[user])
        setUsers(usersArray)
      });
    }
    getUsers()
  },[]);

  useEffect(() => {
    if(users && moreUsers) {
      const newUsers = [...users, moreUsers];
      setUsers(newUsers)
    }
  },[moreUsers]);

  const updateUsers = useCallback(async () => {
    await DataSource.subscribe((moreUsers:UserRanking ) => {
      setMoreUsers(moreUsers)
    })
  },[]);

  useEffect(() => {
    updateUsers()
    return () => {
      DataSource.unsubscribe(() => {})
    }
  },[updateUsers]);

  const handleStopLoadingUsers = () => {
    DataSource.unsubscribe(() => {})
  }

  const handleContinueLoadingUsers = () => {
    updateUsers()
  }

  return (
    <>
      <button onClick={handleStopLoadingUsers}>Stop Loading Users</button>
      <button onClick={handleContinueLoadingUsers}>Start Loading Users</button>
      <table>
        <thead>
          <tr>
            <th>Position</th>
            <th>ID</th>
            <th>Name</th>
            <th>Points</th>
          </tr>
        </thead>
        <tbody>
          {users ?
            users.map((user:UserDataStore, index: string)=>{
              return (
                <tr>
                  <td>{index}</td>
                  <td>{user.id}</td>
                  <td>{user.name}</td>
                  <td>{user.points}</td>
                </tr>
              )
          }): null}
        </tbody>
      </table>
    </>
  );
}