import React from "react";
import { Link, useLocation } from "react-router-dom";
import { Helmet } from "react-helmet";

import { PortalIcon, FlagIcon, ChatIcon } from "../../images/Images.tsx";
import Summary from "@components/Summary.tsx";
import Leaderboards from "@components/Leaderboards.tsx";
import Discussions from "@components/Discussions.tsx";
import ModMenu from "@components/ModMenu.tsx";
import { MapDiscussions, MapLeaderboard, MapSummary } from "@customTypes/Map.ts";
import { API } from "@api/Api.ts";

interface MapProps {
  token?: string;
  isModerator: boolean;
}

const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
  const [selectedRun, setSelectedRun] = React.useState<number>(0);

  const [mapSummaryData, setMapSummaryData] = React.useState<
    MapSummary | undefined
  >(undefined);
  const [mapLeaderboardData, setMapLeaderboardData] = React.useState<
    MapLeaderboard | undefined
  >(undefined);
  const [mapDiscussionsData, setMapDiscussionsData] = React.useState<
    MapDiscussions | undefined
  >(undefined);

  const [navState, setNavState] = React.useState<number>(0);

  const location = useLocation();

  const mapID = location.pathname.split("/")[2];

  const _fetch_map_summary = React.useCallback(async () => {
    const mapSummary = await API.get_map_summary(mapID);
    setMapSummaryData(mapSummary);
  }, [mapID]);

  const _fetch_map_leaderboards = React.useCallback(async () => {
    const mapLeaderboards = await API.get_map_leaderboard(mapID, "1");
    setMapLeaderboardData(mapLeaderboards);
  }, [mapID]);

  const _fetch_map_discussions = React.useCallback(async () => {
    const mapDiscussions = await API.get_map_discussions(mapID);
    setMapDiscussionsData(mapDiscussions);
  }, [mapID]);

  React.useEffect(() => {
    _fetch_map_summary();
    _fetch_map_leaderboards();
    _fetch_map_discussions();
  }, [
    mapID,
    _fetch_map_discussions,
    _fetch_map_leaderboards,
    _fetch_map_summary,
  ]);

  if (!mapSummaryData) {
    // loading placeholder
    return (
      <>
        <main className="*:text-foreground relative left-0 w-[calc(100%-20rem)] min-h-screen p-4 sm:p-8">
          <section id="section1" className="summary1">
            <div>
              <Link to="/games">
                <button
                  className="nav-button rounded-[20px] h-10 bg-surface border-0 text-foreground text-lg font-[--font-barlow-semicondensed-regular] transition-colors duration-100 hover:bg-surface2 flex items-center px-2"
                >
                  <i className="triangle"></i>
                  <span className="px-2">Games List</span>
                </button>
              </Link>
            </div>
          </section>

          <section id="section2" className="summary1 mt-4 flex gap-2 flex-wrap">
            <button className="nav-button">
              <img src={PortalIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
              <span>Summary</span>
            </button>
            <button className="nav-button">
              <img src={FlagIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
              <span>Leaderboards</span>
            </button>
            <button className="nav-button">
              <img src={ChatIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
              <span>Discussions</span>
            </button>
          </section>

          <section id="section6" className="summary2 mt-4" />
        </main>
      </>
    );
  }

  return (
    <>
      <Helmet>
        <title>LPHUB | {mapSummaryData.map.map_name}</title>
        <meta name="description" content={mapSummaryData.map.map_name} />
      </Helmet>
      {isModerator && (
        <ModMenu
          token={token}
          data={mapSummaryData}
          selectedRun={selectedRun}
          mapID={mapID}
        />
      )}

      <div id="background-image">
        <img src={mapSummaryData.map.image} alt="" />
      </div>
      <main className="relative left-0 w-full sm:ml-80 sm:w-[calc(100%-20rem)] min-h-screen max-h-screen overflow-y-auto p-4 sm:p-8 scrollbar-thin scrollbar-track-surface scrollbar-thumb-muted hover:scrollbar-thumb-surface1">
        <section id="section1" className="summary1">
          <div>
            <Link to="/games">
              <button
                className="nav-button rounded-[20px] h-10 bg-surface border-0 text-foreground text-lg font-[--font-barlow-semicondensed-regular] transition-colors duration-100 hover:bg-surface2 flex items-center px-2"
              >
                <i className="triangle"></i>
                <span className="px-2">Games List</span>
              </button>
            </Link>
            <Link
              to={`/games/${mapSummaryData.map.is_coop ? "2" : "1"}?chapter=${mapSummaryData.map.chapter_name.split(" ")[1]}`}
            >
              <button
                className="nav-button ml-2"
              >
                <i className="triangle"></i>
                <span className="px-2">{mapSummaryData.map.chapter_name}</span>
              </button>
            </Link>
            <br />
            <span className="block mt-2 text-lg sm:text-xl text-foreground">
              <b>{mapSummaryData.map.map_name}</b>
            </span>
          </div>
        </section>

        <section id="section2" className="summary1 mt-4 flex gap-2 flex-wrap">
          <button className="nav-button" onClick={() => setNavState(0)}>
            <img src={PortalIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
            <span>Summary</span>
          </button>
          <button className="nav-button" onClick={() => setNavState(1)}>
            <img src={FlagIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
            <span>Leaderboards</span>
          </button>
          <button className="nav-button" onClick={() => setNavState(2)}>
            <img src={ChatIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
            <span>Discussions</span>
          </button>
        </section>

        {navState === 0 && (
          <Summary
            selectedRun={selectedRun}
            setSelectedRun={setSelectedRun}
            data={mapSummaryData}
          />
        )}
        {navState === 1 && <Leaderboards mapID={mapID} />}
        {navState === 2 && (
          <Discussions
            data={mapDiscussionsData}
            token={token}
            isModerator={isModerator}
            mapID={mapID}
            onRefresh={() => _fetch_map_discussions()}
          />
        )}
      </main>
    </>
  );
};

export default Maps;