import Template from "components/window/Template"
import { NextPage } from 'next'
import { GetServerSideProps } from 'next';
import axios from "axios";
import { ClanTracker } from "helper/types";
import PlayerDisplayWrapper from "components/PlayerDisplay/PlayerDisplayWrapper";
import PlayerDisplay from "components/PlayerDisplay";
import { fromNow, getStarredClans } from "helper";
import Seo from "components/SEO";
import { useMediaQuery } from "hooks/useMediaQuery";
import { useEffect, useState } from "react";
import { AiFillStar } from "react-icons/ai";
const ClanPage: NextPage = ({ top, recent }: props) => {
  const isSmall = useMediaQuery({ maxWidth: "1380px" })
  const [starredClans, setStarredClans] = useState<any>(undefined)

  useEffect(() => {
    setStarredClans(getStarredClans())
  }, [])
  
  return (
    <>
      {/* @ts-ignore */}
      <Seo templateTitle="Clan Search" description="Search for clans in Brawlhalla" />
      <Template useWindow>
      <p className="text-center text-xl font-Abel" >
      Start searching for clans by their 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 Clans:</h1>
        <PlayerDisplayWrapper marginTop={0}>
          {(starredClans?.length >= 1) ? starredClans?.map((clan, i: number) =>
            <PlayerDisplay clan 
              brawlhalla_id={clan.id}
              name={clan.name || `ID: ${clan.id}`} showRating statsText={`Added ${fromNow(clan.starredAt)}`} key={`clan_${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">Top Searches:</h1>
        <PlayerDisplayWrapper marginTop={0}>
          {top?.map((clan, i: number) =>
            <PlayerDisplay clan cardStatsText={<>Views: {clan.views}<br /> {fromNow(clan.lastVisit)}</>}
              brawlhalla_id={clan.clan_id} name={clan.name || `ID: ${clan.clan_id}`} showRating statsText={`Views: ${clan.views} | ${fromNow(clan.lastVisit)}`} key={`player_${i}`}
            />
          )}
        </PlayerDisplayWrapper>
        {/* <h1 className="text-4xl font-Coda text-center text-gold-300">Recent Searches:</h1>
        <PlayerDisplayWrapper marginTop={0}>
          {recent?.map((clan, i: number) =>
            <PlayerDisplay clan cardStatsText={<>Views: {clan.views}<br /> {fromNow(clan.lastVisit)}</>}
              brawlhalla_id={clan.clan_id} name={clan.name || `ID: ${clan.clan_id}`} showRating statsText={`Views: ${clan.views} | ${fromNow(clan.lastVisit)}`} key={`player_${i}`}
            />
          )}

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


export const getServerSideProps: GetServerSideProps = async (ctx) => {
  let data = await axios.get(`${process.env.DOMAIN}/api/tracker/clan`)
  return {
    props: {
      top: await data?.data?.top,
      recent: await data?.data?.recent
    }
  }
}
interface props {
  top: Array<ClanTracker>
  recent: Array<ClanTracker>
}
export default ClanPage;