import { useQuery } from "@tanstack/react-query";
import axios, { AxiosResponse } from "axios";
import PlayerDisplay from "components/PlayerDisplay";
import PlayerDisplayWrapper from "components/PlayerDisplay/PlayerDisplayWrapper";
import Seo from "components/SEO";
import Template from "components/window/Template";
import fuzzysort from "fuzzysort";
import { LeaderboardPlayer } from "helper/types";
import { FormEvent, useEffect, useState } from "react";
import {CgSpinnerAlt} from "react-icons/cg"
import {AnimatePresence, motion} from "framer-motion"
const NameSearch = ({
  router: {
    query: { name, animate = false },
  },
}: {
  router: {
    query: {
      name: string;
      animate?: boolean
    };
  };
}) => {
const [loading, setLoading] = useState(true)
const [sortedData, setSortedData] = useState(false)
  const queryData = useQuery<Array<LeaderboardPlayer>>(
    [`players-${encodeURIComponent(name)}`],
    async () => getPlayerNamesData(name),
    {
      staleTime: 119000,
      cacheTime: 119000,
    }
  );
  const [data, setData] = useState<Array<LeaderboardPlayer>|undefined>(queryData.data);
  useEffect(() => {
    if(queryData.data !== undefined) {
        if(sortedData === true) return
    setData(
      fuzzysort
        .go(name, queryData.data, {
          key: "name",
        })
        .map((v) => v.obj)
    );
    setSortedData(true)
    setTimeout(() => {
    setLoading(false)
      
    }, 2000);
    
}
  }, [queryData.data]);

  
  return (
    
    <Template useWindow center={loading}>
        
    {/*  @ts-ignore */}
    <Seo templateTitle={name} description={`Search results for players named "${name}" on Brawlhalla`} />
    <AnimatePresence exitBeforeEnter>
    {loading && <motion.div className="grid min-h-[80vh] place-items-center" exit={{
      y: -50,
      opacity: 0
    }} animate={{
        y: 0,
        opacity: 1
    }} initial={{
      y: 50,
      opacity: 0
    }} transition={{
        duration: 0.5,
        delay: 0.2
    }}><div><CgSpinnerAlt size={"4rem"} className="text-common-white animate-spin" /><p className="text-xl font-Coda">Loading...</p></div></motion.div>}
  </AnimatePresence>
    {(!loading && data !== undefined) && <motion.div initial={{
      opacity:0,
      y: -20
    }}
    animate={{
      opacity:1,
      y:0 
    }} transition={{
      delay: 0.7,
      duration: 0.5
    }}>
      <div className="select_parent font-Coda">
        <select defaultValue="relevance"
          onChange={async (e: FormEvent<HTMLSelectElement>) => {
            let newData = data
            const val = e.currentTarget.value
            if(val === "relevance") {
              newData = (fuzzysort.go(name, data, {
                key: "name"
              })).map((v) => v.obj)
              setData(newData)
            }
            else if (val === "rating") {
              // Sort leaderboard by highest rating
              newData = data.sort((a: LeaderboardPlayer, b: LeaderboardPlayer) => {
                // if numbers are the same
                // Choose the person with the higher rank
                if (a.rating === b.rating) {
                  return Number(a.rank) - Number(b.rank)
                }
                return Number(b.rating) - Number(a.rating)
              })
              setData([...newData])
            } else if (val === "peak_rating") {
              // Sort leaderboard by highest peak rating
              newData = data.sort((a: LeaderboardPlayer, b: LeaderboardPlayer) => {
                return Number(b.peak_rating) - Number(a.peak_rating)
              })
              setData([...newData])

            } else if (val === "winrate") {
              // Sort leaderboard by highest winrate
              newData = data.sort((a: LeaderboardPlayer, b: LeaderboardPlayer) => {
                let a_games = Number(a.games)
                let b_games = Number(b.games)
                let a_wins = Number(a.wins)
                let b_wins = Number(b.wins)
                let a_winrate = Math.floor((a_wins * 100) / a_games)
                let b_winrate = Math.floor((b_wins * 100) / b_games)
                return b_winrate - a_winrate
              })
              setData([...newData])
            } else if (val === "loserate") {
              // Sort leaderboard by highest winrate
              newData = data.sort((a: LeaderboardPlayer, b: LeaderboardPlayer) => {
                let a_games = Number(a.games)
                let b_games = Number(b.games)
                let a_wins = Number(a.wins)
                let b_wins = Number(b.wins)
                let a_losses = a_games - a_wins
                let b_losses = b_games - b_wins
                let a_loserate = (a_losses * 100) / a_games
                let b_loserate = (b_losses * 100) / b_games
                return b_loserate - a_loserate
              })
              setData([...newData])
            }
          }}>
          <option value={"relevance"}>
          Relevance
          </option>
          <option value={"rating"}>
            Rating
          </option>
          <option value={"peak_rating"}>
            Peak rating
          </option>
          <option value={"winrate"}>
            Winrate
          </option>
        </select>
        <h2 className="text-3xl mt-2"><span className="text-gold-300">{data.length}</span>{" "}Matches</h2>
      </div>
      <PlayerDisplayWrapper>
        {data?.map((player:LeaderboardPlayer, i:number) => <PlayerDisplay animate={i} showRating rank={undefined} {...(player as object)} key={`player_${i}`} />)}
      </PlayerDisplayWrapper>
    </motion.div>}
  </Template>
  );
};
async function getPlayerNamesData(name: string) {
    let players: AxiosResponse = await axios.get<AxiosResponse>
      (`${process.env.DOMAIN}/api/player/name/${encodeURIComponent(name)}/1/`, {
        headers: {
          "Content-Type": "application/json",
          "Accept": "application/json",
        },
      })
    return players.data
  }
export default NameSearch;