<script setup lang="ts">
import { LANE_IMAGES, lanePositionToIndex, POSITIONS_STR } from '~/utils/cdragon'

import type { LaneData, ChampionData, Champion } from 'match_collector'

const route = useRoute()
const lane = route.params.lane as string

const { data: championsData }: { data: Ref<Array<Champion>> } = await useFetch(
  '/api/cdragon/champion-summary'
)

const { data: championsLanes }: { data: Ref<Array<ChampionData>> } =
  await useFetch('/api/champions')
const infoMap: Map<string, ChampionData> = new Map()
for (const champion of championsLanes.value) {
  infoMap.set(champion.alias, champion)
}

const champions = championsData.value.slice(1).filter(champion => {
  const championData: ChampionData | undefined = infoMap.get(champion.alias.toLowerCase())
  if (championData == undefined) return false

  const lanes = championData.lanes
  return lanes.reduce(
    (acc: boolean, current: { data: string; count: number }) =>
      acc || current.data.toLowerCase() == lane.toLowerCase(),
    false
  )
})

const allChampions = champions
  .map(x => {
    const championData: ChampionData = infoMap.get(x.alias.toLowerCase())!

    let currentLane = championData.lanes[0]
    for (const championLane of championData.lanes) {
      if (championLane.data.toLowerCase() == lane.toLowerCase()) {
        currentLane = championLane
        break
      }
    }

    return { lane: currentLane, champion: x }
  })
  .sort((a, b) => b.lane.pickrate - a.lane.pickrate)

const p_min = Math.min(...allChampions.map(x => x.lane.pickrate))
const p_max = Math.max(...allChampions.map(x => x.lane.pickrate))

allChampions.map(
  x =>
    ((x as { lane: LaneData; champion: Champion; scaledPickrate: number }).scaledPickrate =
      (x.lane.pickrate - p_min) / (p_max - p_min))
)
allChampions.sort((a, b) => b.lane.pickrate - a.lane.pickrate)
function tierFromScaledPickrate(min: number, max: number) {
  return (
    allChampions as Array<{ lane: LaneData; champion: Champion; scaledPickrate: number }>
  ).filter(({ scaledPickrate: scaledPickrate }) => {
    return scaledPickrate > min && scaledPickrate <= max
  })
}

const tiers: Array<{ title: string; data: Array<{ lane: LaneData; champion: Champion }> }> = []
tiers.push({ title: 'S', data: tierFromScaledPickrate(0.9, 1) })
tiers.push({ title: 'A', data: tierFromScaledPickrate(0.7, 0.9) })
tiers.push({ title: 'B', data: tierFromScaledPickrate(0.5, 0.7) })
tiers.push({ title: 'C', data: tierFromScaledPickrate(0.3, 0.5) })
tiers.push({ title: 'D', data: tierFromScaledPickrate(0.1, 0.3) })
tiers.push({ title: 'F', data: tierFromScaledPickrate(0, 0.1) })
</script>

<template>
  <div class="tierlist-root">
    <Head>
      <Title>Tierlist for {{ POSITIONS_STR[lanePositionToIndex(lane)] }}</Title>
    </Head>

    <div style="display: flex; min-height: 100vh; align-items: stretch; width: 100%">
      <NavBar :tierlist-list="true" />

      <div id="tierlist-container" style="margin-left: 10px; width: 100%; overflow-y: scroll">
        <div
          style="
            margin-left: 0px;
            margin-top: 20px;
            display: flex;
            margin-bottom: 30px;
            align-items: center;
          "
        >
          <h1 style="margin-left: 10px; font-size: 2.8rem; font-weight: 300">Tierlist for</h1>
          <NuxtImg
            format="webp"
            style="margin-left: 10px"
            width="50"
            height="50"
            :src="LANE_IMAGES[lanePositionToIndex(lane)]"
          />
          <h1 style="margin-left: 10px; font-size: 2.8rem; font-weight: 300">
            {{ POSITIONS_STR[lanePositionToIndex(lane)] }}
          </h1>
        </div>

        <TierlistTier
          v-for="tier in tiers"
          :key="tier.title"
          :title="tier.title"
          :tier="tier.data"
        />

        <TierlistChart id="chart" :data="tiers" />
      </div>
    </div>
  </div>
</template>

<style scoped>
#chart {
  margin-left: 100px;
  margin-right: 100px;
  margin-bottom: 100px;
  margin-top: 40px;
}

@media only screen and (max-width: 450px) {
  #chart {
    margin-left: 2px;
    margin-right: 12px;
    margin-bottom: 40px;
    margin-top: 40px;
  }
  #tierlist-container {
    padding-bottom: 120px;
  }
}
</style>
