import { FormEvent, useEffect, useState } from "react"
import axios, { AxiosResponse } from "axios";
import { GetStaticProps, NextPage } from "next";
import PlayerDisplay from "components/PlayerDisplay";
import PlayerDisplayWrapper from "components/PlayerDisplay/PlayerDisplayWrapper";
import Template from "components/window/Template"
import { dehydrate, QueryClient, useQuery } from "@tanstack/react-query";
import { LeaderboardPlayer } from "helper/types";
import fuzzysort from "fuzzysort";
import Seo from "components/SEO";

const PlayerNameSearch: NextPage<props> = ({ name = "", isValid = false }: props) => {
  const queryData = useQuery<Array<LeaderboardPlayer>>([`players-${encodeURIComponent(name)}`], async () => getPlayerNamesData(name), {
    staleTime: 119000,
    cacheTime: 119000
  })
  const [data, setData] = useState<Array<LeaderboardPlayer>>(queryData.data)
  useEffect(() => {
    setData((fuzzysort.go(name, data, {
      key: "name"
    })).map((v) => v.obj))
  }, [])
  
  return (
    <>
      {/*  @ts-ignore */}
      <Seo templateTitle={name} description={`Search results for players named "${name}" on Brawlhalla`} />
      <Template useWindow>
        <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 index={i} showRating rank={undefined} {...(player as object)} key={`player_${i}`} />)}
        </PlayerDisplayWrapper>
      </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
}
// Get query on server side and fetch
export const getStaticProps: GetStaticProps = async ({ params }) => {
  if (params?.name === undefined) return {
    props: {
      isValid: false,
      name: undefined
    },
  }
  const name = decodeURIComponent(params?.name.toString());
  let isValid = false
  if (name.length <= 1 || name.length >= 33) {
    return {
      props: {
        isValid,
        name: name
      },
      revalidate: 120,
    }
  }
  try {
    const queryClient = new QueryClient()
    await queryClient.prefetchQuery([`players-${encodeURIComponent(name)}`], async () => getPlayerNamesData(name), {
      staleTime: 119000,
      cacheTime: 119000
    })


    // if (players?.data?.length === 1) return {
    //   props: {
    //     isValid: true,
    //     name: name,
    //     players: []
    //   },
    //   redirect: {
    //     destination: `/player/${players.data[0].brawlhalla_id}`,
    //     permanent: false,
    //   },
    //   revalidate: 120,
    // }
    return {
      props: {
        isValid: true,
        name: name,
        dehydratedState: dehydrate(queryClient),
      },
      revalidate: 120,
    }

  } catch (e) {
    console.log(e)
    return {
      props: {
        error: !!e
      },
      revalidate: 60,
    }

  }
}
export async function getStaticPaths() {
  return {
    paths: [],
    fallback: 'blocking'
  }
}
interface props {
  name?: string
  isValid?: boolean

}
export default PlayerNameSearch;