import axios, { AxiosResponse } from "axios";
import Template from "components/window/Template";
import {  useState, FormEvent } from "react";
import { NextPage, GetStaticProps, GetStaticPaths } from "next";
import WeaponStatsGrid from "components/WeaponGrid/WeaponStatsGrid";
import { WeaponStats } from "helper/types";
import { useRouter } from "next/router";
import { dehydrate, QueryClient, useQuery } from "@tanstack/react-query";
import Seo from "components/SEO";
const WeaponStatsRankPage: NextPage<pageProps> = (props: pageProps) => {
  const {data} = useQuery<Array<WeaponStats>>([`weapon-stats-${JSON.parse(props.rank)}`], async() => await getWeaponStatsData(JSON.parse(props.rank)), {
    staleTime: 60 * 19 * 1000,
    cacheTime: 60 * 19 * 1000
    })
  const [stats, setStats] = useState(data || [])
  const router = useRouter()
  let rank = JSON.parse(props.rank)
  return (
    <>
      <Seo templateTitle="Weapon statistics" description={`View${((rank !== "All") && ` ${props.rank} rated players`)} weapon statistics for brawlhalla`} />
      <Template useWindow>
        <div className="select_parent mb-8">
          <select
            onChange={async (e: FormEvent<HTMLSelectElement>) => {
              let newStats = stats
              switch (e.currentTarget.value) {
                case "playrate":
                // Sort stats by highest playrate
                newStats = stats.sort((a:WeaponStats, b:WeaponStats) => {
                  return b.playrate - a.playrate
                }
                )
                setStats([...newStats])
                  break;
                  case "winrate":
                  // Sort stats by highest winrate
                  newStats = stats.sort((a:WeaponStats, b:WeaponStats) => {
                    return b.winrate - a.winrate
                  }
                  )
                  setStats([...newStats])
                    break;
                    case "dmg":
                    // Sort stats by highest damage
                    newStats = stats.sort((a:WeaponStats, b:WeaponStats) => {
                      return b.dmg - a.dmg
                    }
                    )
                    setStats([...newStats])
                  case "legends":
                  // Sort stats by highest legends
                  newStats = stats.sort((a:WeaponStats, b:WeaponStats) => {
                    return b.legends - a.legends
                  }
                  )
                  setStats([...newStats])
                    break;
                    case "matchtime":
                    // Sort stats by highest match time
                    newStats = stats.sort((a:WeaponStats, b:WeaponStats) => {
                      return b.match_time - a.match_time
                    }
                    )
                    setStats([...newStats])
                      break;
                      case "timeheld":
                      // Sort stats by highest time held
                      newStats = stats.sort((a:WeaponStats, b:WeaponStats) => {
                        return b.timeheld - a.timeheld
                      }
                      )
                      setStats([...newStats])
                        break;
                default:
                  break;
              }

            }}>
            <option disabled selected hidden>
              Sort by
            </option>
            <option value={"playrate"}>
              Playrate
            </option>
            <option value={"winrate"}>
              Winrate
            </option>
            <option value={"dmg"}>
              Damage
            </option>
            <option value={"matchtime"}>
              Match time
            </option>
            <option value={"timeheld"}>
              Time held
            </option>
            <option value={"legends"}>
              Legends
            </option>
          </select>
          <select onChange={async(e) => {
            // Redirect to /${rank}
            router.push(`/weapons/${e.currentTarget.value}`)
          }} defaultValue={rank} >
            <option value="All">
              All Ranks
            </option>
            <option value="Diamond">
              Diamond
            </option>
            <option value="Platinum">
              Platinum
            </option>
 
          </select>
        </div>
      <WeaponStatsGrid weapons={stats} />
      </Template>
    </>
  );
}
async function getWeaponStatsData(rankParam:string) {
  let rank:string|undefined = rankParam
  if(rank === "All") rank = undefined;
  let data: AxiosResponse = await axios.get<AxiosResponse>
  (`${process.env.DOMAIN}/api/stats/weapons/${rank ? rank : ""}`, {
    headers: {
      "Content-Type": "application/json",
      "Accept": "application/json",
    },
  })
  let stats:Array<WeaponStats> = JSON.parse(JSON.stringify(data.data));
  return stats
}
export const getStaticProps: GetStaticProps = async (context) => {
    let rank:any = context.params?.rank ? (context.params?.rank)?.toString() : undefined;
    try {
    // let leaderboard: AxiosResponse = await axios.get<AxiosResponse>(`${process.env.DOMAIN}/api/rankings/1v1/1`, {
    //   headers: {
    //     "Content-Type": "application/json",
    //     "Accept": "application/json",
    //   },
    // })
    const queryClient = new QueryClient()
    await queryClient.prefetchQuery([`weapon-stats-${rank}`], async() => await getWeaponStatsData(rank), {
      staleTime: 60 * 19 * 1000,
      cacheTime: 60 * 19 * 1000
      })
    return {
      props: {
        dehydratedState: dehydrate(queryClient),
        rank: JSON.stringify(rank),
      },
      // Re-fetches the data every {time} seconds
      // 20 minutes
      revalidate: 60 * 20,
    }
  } catch (e) {
    console.log(e)
    return {
      props: {
        error: !!e,
        rank: JSON.stringify(rank),
      },
      revalidate: 60,
    }

  }
}
export const getStaticPaths: GetStaticPaths = async () => {
    // Diamond, all, platinum
    let ranks = ["Diamond", "All", "Platinum"]
    let paths = ranks.map((rank) => {
        return {
            params: {
            rank: rank,
            },
        }
        }
    )
    return {
        paths: paths,
        fallback: false,
    }
}
interface pageProps {
  stats: Array<WeaponStats>,
  rank: string,
}

export default WeaponStatsRankPage;