import React, { useEffect } from 'react';
import { Helmet } from 'react-helmet';

import RankingEntry from '@components/RankingEntry';
import {
  Ranking,
  SteamRanking,
  RankingType,
  SteamRankingType,
} from '@customTypes/Ranking';
import { API } from '@api/Api';

import '@css/Rankings.css';

const Rankings: React.FC = () => {
  const [leaderboardData, setLeaderboardData] = React.useState<
    Ranking | SteamRanking
  >();
  const [currentLeaderboard, setCurrentLeaderboard] = React.useState<
    RankingType[] | SteamRankingType[]
  >();
  enum LeaderboardTypes {
    official,
    unofficial,
  }
  const [currentRankingType, setCurrentRankingType] =
    React.useState<LeaderboardTypes>(LeaderboardTypes.official);

  const [leaderboardLoad, setLeaderboardLoad] = React.useState<boolean>(false);

  enum RankingCategories {
    rankings_overall,
    rankings_multiplayer,
    rankings_singleplayer,
  }
  const [currentLeaderboardType, setCurrentLeaderboardType] =
    React.useState<RankingCategories>(RankingCategories.rankings_singleplayer);
  const [load, setLoad] = React.useState<boolean>(false);

  const _fetch_rankings = async () => {
    setLeaderboardLoad(false);
    const rankings = await API.get_official_rankings();
    setLeaderboardData(rankings);
    if (currentLeaderboardType === RankingCategories.rankings_singleplayer) {
      setCurrentLeaderboard(rankings.rankings_singleplayer);
    } else if (
      currentLeaderboardType === RankingCategories.rankings_multiplayer
    ) {
      setCurrentLeaderboard(rankings.rankings_multiplayer);
    } else {
      setCurrentLeaderboard(rankings.rankings_overall);
    }
    setLoad(true);
    setLeaderboardLoad(true);
  };

  const __dev_fetch_unofficial_rankings = async () => {
    try {
      setLeaderboardLoad(false);
      const rankings = await API.get_unofficial_rankings();
      setLeaderboardData(rankings);
      if (currentLeaderboardType === RankingCategories.rankings_singleplayer) {
        // console.log(_sort_rankings_steam(unofficialRanking.rankings_singleplayer))
        setCurrentLeaderboard(rankings.rankings_singleplayer);
      } else if (
        currentLeaderboardType === RankingCategories.rankings_multiplayer
      ) {
        setCurrentLeaderboard(rankings.rankings_multiplayer);
      } else {
        setCurrentLeaderboard(rankings.rankings_overall);
      }
      setLeaderboardLoad(true);
    } catch (e) {
      console.log(e);
    }
  };

  const _set_current_leaderboard = (ranking_cat: RankingCategories) => {
    if (ranking_cat === RankingCategories.rankings_singleplayer) {
      setCurrentLeaderboard(leaderboardData!.rankings_singleplayer);
    } else if (ranking_cat === RankingCategories.rankings_multiplayer) {
      setCurrentLeaderboard(leaderboardData!.rankings_multiplayer);
    } else {
      setCurrentLeaderboard(leaderboardData!.rankings_overall);
    }

    setCurrentLeaderboardType(ranking_cat);
  };

  // unused func
  //   const _set_leaderboard_type = (leaderboard_type: LeaderboardTypes) => {
  //     if (leaderboard_type === LeaderboardTypes.official) {
  //       _fetch_rankings();
  //     } else {
  //     }
  //   };

  useEffect(() => {
    _fetch_rankings();
    if (load) {
      _set_current_leaderboard(RankingCategories.rankings_singleplayer);
    }
  }, [load, RankingCategories.rankings_singleplayer]);

  return (
    <main>
      <Helmet>
        <title>LPHUB | Rankings</title>
      </Helmet>
      <section className="nav-container nav-1">
        <div>
          <button
            onClick={() => {
              _fetch_rankings();
              setCurrentRankingType(LeaderboardTypes.official);
            }}
            className={`nav-1-btn ${currentRankingType === LeaderboardTypes.official ? 'selected' : ''}`}
          >
            <span>Official (LPHUB)</span>
          </button>
          <button
            onClick={() => {
              __dev_fetch_unofficial_rankings();
              setCurrentRankingType(LeaderboardTypes.unofficial);
            }}
            className={`nav-1-btn ${currentRankingType === LeaderboardTypes.unofficial ? 'selected' : ''}`}
          >
            <span>Unofficial (Steam)</span>
          </button>
        </div>
      </section>
      <section className="nav-container nav-2">
        <div>
          <button
            onClick={() =>
              _set_current_leaderboard(RankingCategories.rankings_singleplayer)
            }
            className={`nav-2-btn ${currentLeaderboardType === RankingCategories.rankings_singleplayer ? 'selected' : ''}`}
          >
            <span>Singleplayer</span>
          </button>
          <button
            onClick={() =>
              _set_current_leaderboard(RankingCategories.rankings_multiplayer)
            }
            className={`nav-2-btn ${currentLeaderboardType === RankingCategories.rankings_multiplayer ? 'selected' : ''}`}
          >
            <span>Cooperative</span>
          </button>
          <button
            onClick={() =>
              _set_current_leaderboard(RankingCategories.rankings_overall)
            }
            className={`nav-2-btn ${currentLeaderboardType === RankingCategories.rankings_overall ? 'selected' : ''}`}
          >
            <span>Overall</span>
          </button>
        </div>
      </section>

      {load ? (
        <section className="rankings-leaderboard">
          <div className="ranks-container">
            <div className="leaderboard-entry header">
              <span>Rank</span>
              <span>Player</span>
              <span>Portals</span>
            </div>

            <div className="splitter"></div>

            {leaderboardLoad &&
              currentLeaderboard?.map((curRankingData, i) => {
                return (
                  <RankingEntry
                    currentLeaderboardType={currentLeaderboardType}
                    curRankingData={curRankingData}
                    key={i}
                  ></RankingEntry>
                );
              })}

            {leaderboardLoad ? null : (
              <div
                style={{
                  display: 'flex',
                  justifyContent: 'center',
                  margin: '30px 0px',
                }}
              >
                <span className="loader"></span>
              </div>
            )}
          </div>
        </section>
      ) : null}
    </main>
  );
};

export default Rankings;