import { useEffect, useState } from "react";
import { apiAuth } from "./api";
import { PlayerRanking } from "./types";
import RaceChart from "./RaceChart";
import { useSession } from "./Session";
import { useNavigate } from "react-router";

const MVPChart = () => {
  let initialData = {} as PlayerRanking[][];
  const [data, setData] = useState(initialData);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [showStd, setShowStd] = useState(false);
  const { user, teams } = useSession();
  const [mixed, setMixed] = useState(false);
  const navigate = useNavigate();
  useEffect(() => {
    user?.scopes.includes(`team:${teams?.activeTeam}`) ||
      teams?.activeTeam === 42 ||
      navigate("/", { replace: true });
  }, [user]);

  useEffect(() => {
    if (teams) {
      const activeTeam = teams.teams.find(
        (team) => team.id == teams.activeTeam
      );
      activeTeam && setMixed(activeTeam.mixed);
    }
  }, [teams]);

  async function loadData() {
    setLoading(true);
    if (teams) {
      await apiAuth(`analysis/mvp/${teams?.activeTeam}?mixed=${mixed}`, null)
        .then((data) => {
          if (data.detail) {
            setError(data.detail);
            return initialData;
          } else {
            setError("");
            return data as Promise<PlayerRanking[][]>;
          }
        })
        .then((data) => {
          setData(data.map((_data) => _data.sort((a, b) => a.rank - b.rank)));
        })
        .catch(() => setError("no access"));
      setLoading(false);
    } else setError("team unknown");
  }

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

  if (loading) return <span className="loader" />;
  else if (error) return <span>{error}</span>;
  else
    return data.map((_data) => <RaceChart std={showStd} playerRanks={_data} />);
};

export default MVPChart;