import { useEffect, useState } from "react";
import { apiAuth } from "./api";
import { PlayerRanking } from "./types";
import RaceChart from "./RaceChart";

const MVPChart = () => {
  const [data, setData] = useState({} as PlayerRanking[]);
  const [loading, setLoading] = useState(true);
  const [showStd, setShowStd] = useState(false);

  async function loadData() {
    setLoading(true);
    await apiAuth("analysis/mvp", null)
      .then((json) => json as Promise<PlayerRanking[]>)
      .then((json) => {
        setData(json.sort((a, b) => a.rank - b.rank));
      });
    setLoading(false);
  }

  useEffect(() => {
    loadData();
  }, []);

  return (
    <>
      {loading ? (
        <span className="loader" />
      ) : (
        <RaceChart std={showStd} players={data} />
      )}
    </>
  );
};

export default MVPChart;