<script setup>
const {data: champions} = await useFetch(CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/champion-summary.json")
const filteredChampions = ref(champions.value.slice(1))

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

</script>

<template>
    <div>
    <div style="width: fit-content; margin: auto;">
        <input v-model="searchText" ref="searchBar" class="search-bar" type="text" placeholder="Search a champion"/>
    </div>
    <div class="champion-container" style="margin-top: 20px;">
        <RouterLink style="margin-left: 5px; margin-right: 5px;" v-for="champion in filteredChampions" :to="'/champion/' + champion.alias.toLowerCase()">
        <img :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
        </RouterLink>
    </div>
    </div>
</template>

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

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

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

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

    margin: auto;
}
</style>