import Template from "components/window/Template";
import { useState, FormEvent } from "react";
import { useRouter } from "next/router";
import { NextPage, GetStaticProps } from "next";
import WeaponStatsGrid from "components/WeaponGrid/WeaponStatsGrid";
import { WeaponStats } from "helper/types";
import { dehydrate, QueryClient, useQuery } from "@tanstack/react-query";
import axios, { AxiosResponse } from "axios";
import Seo from "components/SEO";

const WeaponStatsPage: NextPage<pageProps> = (props: pageProps) => {
  const {data} = useQuery([`weapon-stats`], getWeaponStats, {
    staleTime: 60 * 19 * 1000,
    cacheTime: 60 * 19 * 1000
    })
  const [stats, setStats] = useState(data || [])
  const router = useRouter()
  return (
    <>
      {/* @ts-ignore */}
        <Seo templateTitle="Weapon statistics" description="View 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 defaultValue={"All"} onChange={async(e) => {
            // Redirect to /${rank}
            router.push(`/weapons/${e.currentTarget.value}`)
          }}>
            <option value="All">
              All Ranks
            </option>
            <option value="Diamond">
              Diamond
            </option>
            <option value="Platinum">
              Platinum
            </option>

          </select>
        </div>
      <WeaponStatsGrid weapons={stats} />
      </Template>
    </>
  );
}
async function getWeaponStats() {
  let data: AxiosResponse = await axios.get<AxiosResponse>
  (`${process.env.DOMAIN}/api/stats/weapons`, {
    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) => {
  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`], getWeaponStats, {
      staleTime: 60 * 19 * 1000,
      cacheTime: 60 * 19 * 1000
      })


    return {
      props: {
        dehydratedState:dehydrate(queryClient)
      },
      // Re-fetches the data every {time} seconds
      // 20 minutes
      revalidate: 60 * 20,
    }
  } catch (e) {
    console.log(e)
    return {
      props: {
        error: !!e
      },
      revalidate: 60,
    }

  }
}

interface pageProps {
  stats: Array<WeaponStats>
}

export default WeaponStatsPage;