import Template from "components/window/Template"
import { NextPage } from 'next'
import { GetServerSideProps } from 'next';
import axios from "axios";
import { PlayerTracker } from "helper/types";
import PlayerDisplayWrapper from "components/PlayerDisplay/PlayerDisplayWrapper";
import PlayerDisplay from "components/PlayerDisplay";
import { fromNow, getStarredPlayers } from "helper";
import {AiFillStar} from "react-icons/ai"
import Seo from "components/SEO";
import { useEffect, useState } from "react";
import { useMediaQuery } from "hooks/useMediaQuery";

const PlayerPage: NextPage = ({ data }: props) => {
  const [starredPlayers, setStarredPlayers] = useState<any>(undefined)
 const isSmall = useMediaQuery({ maxWidth: "1380px" })

  useEffect(() => {
    setStarredPlayers(getStarredPlayers())
  }, [])
  
  return (
    <>
      {/* @ts-ignore */}
      <Seo templateTitle="Player Search" description="Search for players on Brawlhalla" />
      <Template useWindow>
      <p className="text-center text-xl font-Abel" >
      Start searching for players by either their name, Brawlhalla ID, or Steam ID! You can find the searching methods {" "}
      {isSmall ? <>on top of this window</> : <>on the top left of this page</>}
      </p>
      <br/>
        <h1 className="text-4xl font-Coda text-center text-gold-300">Starred Players:</h1>
        <PlayerDisplayWrapper marginTop={0}>
          {(starredPlayers?.length >= 1) ? starredPlayers?.map((player, i: number) =>
            <PlayerDisplay
              brawlhalla_id={player.id}
              name={player.name || `ID: ${player.id}`} showRating statsText={`Added ${fromNow(player.starredAt)}`} key={`player_${i}`}
            />
          ) : <>
          <p className="text-center text-lg font-Abel" >
            Start favoriting players by clicking the <AiFillStar style={{
              display: "inline-block",
              marginBottom: "5px"
            }} /> button on the top left of the account icon.
          </p>
          </>}

        </PlayerDisplayWrapper>
        <br />
        <h1 className="text-4xl font-Coda text-center text-gold-300">Recent Searches:</h1>
        <PlayerDisplayWrapper marginTop={0}>
          {data.map((player, i: number) =>
            <PlayerDisplay cardStatsText={<>Views: {player.views}<br />{fromNow(player.lastVisit)}</>}
              brawlhalla_id={player.brawlhalla_id} name={player.name || `ID: ${player.brawlhalla_id}`} showRating statsText={`Views: ${player.views} | ${fromNow(player.lastVisit)}`} key={`player_${i}`}
            />
          )}

        </PlayerDisplayWrapper>
      </Template>
    </>
  );
}


export const getServerSideProps: GetServerSideProps = async (ctx) => {
  let data = await axios.get(`${process.env.DOMAIN}/api/tracker/player/recent`)
  return {
    props: {
      data: await data.data
    }
  }
}
interface props {
  data: Array<PlayerTracker>
}
export default PlayerPage;