<script setup lang="ts">
type ChampionResponse = {
    data: Ref<Array<Champion>>
}
type Champion = {
    name: string
    alias: string
    squarePortraitPath: string
}
const {data: championsData} : ChampionResponse = await useFetch(CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/champion-summary.json")
const champions = championsData.value.slice(1).sort((a, b) => {
    if(a.name < b.name) return -1;
    if(a.name > b.name) return 1;
    return 0;
})

const {data: championsLanes} : {data: Ref<any>} = await useFetch("/api/champions")
const lanesMap = new Map()
for(let champion of championsLanes.value) {
    lanesMap.set(champion.alias, champion.lanes)
}

const filteredChampions = ref(champions)

const searchBar = useTemplateRef("searchBar")
watch(searchBar, (newS, oldS) => {searchBar.value?.focus()})
const searchText = ref("")
watch(searchText, (newT, oldT) => {
    filteredChampions.value = champions.filter((champion) => champion.name.toLowerCase().includes(searchText.value.toLowerCase()))
})

function filterToLane(filter: number) {
    switch(filter) {
        case 0:
            return "TOP";
        case 1:
            return "JUNGLE";
        case 2:
            return "MIDDLE";
        case 3:
            return "BOTTOM";
        case 4:
            return "UTILITY";
    }
}

function onLaneFilterChange(newValue: number) {
    if(newValue != -1) {
        
        
        
        filteredChampions.value = champions.filter((champion) => {
            const lanes : Array<any> = lanesMap.get(champion.alias.toLowerCase())
            if(lanes == undefined) return false;

            return lanes.reduce((acc : boolean, current : {data:string, count:number}) => 
                acc || (current.data == filterToLane(newValue)), false)
        })
    }
    else {
        filteredChampions.value = champions
    }
}

async function submit() {
    await navigateTo("/champion/" + filteredChampions.value[0].alias.toLowerCase())
}

</script>

<template>
    <div>
    <div style="width: fit-content; margin: auto; display: flex; align-items: center;">
        <LaneFilter @filter-change="(value : number) => onLaneFilterChange(value)" style="margin-right: 20px;"/>
        <input @keyup.enter="submit" v-model="searchText" ref="searchBar" class="search-bar" type="text" placeholder="Search a champion"/>
    </div>
    <div class="champion-container">
        <NuxtLink v-for="champion in filteredChampions" :to="'/champion/' + champion.alias.toLowerCase()">
        <div class="champion-img-container">
        <NuxtImg class="champion-img" :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
        </div>
        </NuxtLink>
    </div>
    </div>
</template>

<style>
.search-bar {
    width: 400px;
    height: 60px;

    background-color: var(--color-surface-darker);
    
    font-size: 28px;

    border-radius: 12px;
    border: none;
    padding-left: 10px;
}
.search-bar:focus {
    border: 2px solid var(--color-on-surface);
    outline: none;
}
.champion-container {
    width: 90%;
    height: auto;

    display: grid;
    grid-template-columns: repeat(auto-fit, 128px);
    grid-gap: 10px;
    justify-content: center;

    /* overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-color: var(--color-on-surface) var(--color-surface-darker);
    scrollbar-width: thin; */

    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}
.champion-img-container {
    overflow: hidden; width: 120px; height: 120px;
    border: 1px solid var(--color-surface);
}
.champion-img-container:hover {
    border: 1px solid var(--color-on-surface);
}
.champion-img {
    width: 116px;
    height: 116px;
    transform: translate(4px, 4px) scale(1.2, 1.2);

    user-select: none;
}
</style>