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

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

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 = async () => {
    const mapSummary = await API.get_map_summary(mapID);
    setMapSummaryData(mapSummary);
  };

  const _fetch_map_leaderboards = async () => {
    const mapLeaderboards = await API.get_map_leaderboard(mapID, '1');
    setMapLeaderboardData(mapLeaderboards);
  };

  const _fetch_map_discussions = async () => {
    const mapDiscussions = await API.get_map_discussions(mapID);
    setMapDiscussionsData(mapDiscussions);
  };

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

  if (!mapSummaryData) {
    // loading placeholder
    return (
      <>
        <main>
          <section id="section1" className="summary1">
            <div>
              <Link to="/games">
                <button
                  className="nav-button"
                  style={{ borderRadius: '20px 20px 20px 20px' }}
                >
                  <i className="triangle"></i>
                  <span>Games List</span>
                </button>
              </Link>
            </div>
          </section>

          <section id="section2" className="summary1">
            <button className="nav-button">
              <img src={PortalIcon} alt="" />
              <span>Summary</span>
            </button>
            <button className="nav-button">
              <img src={FlagIcon} alt="" />
              <span>Leaderboards</span>
            </button>
            <button className="nav-button">
              <img src={ChatIcon} alt="" />
              <span>Discussions</span>
            </button>
          </section>

          <section id="section6" className="summary2" />
        </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>
        <section id="section1" className="summary1">
          <div>
            <Link to="/games">
              <button
                className="nav-button"
                style={{ borderRadius: '20px 0px 0px 20px' }}
              >
                <i className="triangle"></i>
                <span>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"
                style={{ borderRadius: '0px 20px 20px 0px', marginLeft: '2px' }}
              >
                <i className="triangle"></i>
                <span>{mapSummaryData.map.chapter_name}</span>
              </button>
            </Link>
            <br />
            <span>
              <b>{mapSummaryData.map.map_name}</b>
            </span>
          </div>
        </section>

        <section id="section2" className="summary1">
          <button className="nav-button" onClick={() => setNavState(0)}>
            <img src={PortalIcon} alt="" />
            <span>Summary</span>
          </button>
          <button className="nav-button" onClick={() => setNavState(1)}>
            <img src={FlagIcon} alt="" />
            <span>Leaderboards</span>
          </button>
          <button className="nav-button" onClick={() => setNavState(2)}>
            <img src={ChatIcon} alt="" />
            <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;