<script setup lang="ts">
const route = useRoute()
const championAlias = route.params.alias as string

const { data : championData } : {data : Ref<ChampionData>} = await useFetch("/api/champion/" + championAlias.toLowerCase())
const championId = championData.value.id

defineOgImageComponent('Champion', {
    title: championData.value.name,
    id: championId,
    winrate: championData.value.winrate,
    pickrate: championData.value.pickrate,
    gameCount: championData.value.gameCount,
})
useSeoMeta({
 title: championData.value.name,
 description: 'Build path and runes for ' + championData.value.name + ' on BuildPath'
})

const laneState = ref(0)
const state = ref("runes")
const lane = ref(championData.value.lanes[laneState.value])
function updateState(newState : string, newLane : number) {
    state.value = newState
    laneState.value = newLane
    lane.value = championData.value.lanes[laneState.value]
}
</script>

<template>
    <Head>
        <Title>{{ championData.name }}</Title>
    </Head>

    <div id="alias-content-wrapper">

    <NavBar :champion-name="championData.name" 
        :champion-lanes="championData.lanes" 
        @state-change="updateState"/>

    <div id="champion-content">
        <ChampionTitle id="champion-title" v-if="championData.gameCount > 0" 
            :champion-id="championId" :winrate="lane.winrate" 
            :pickrate="lane.pickrate" :game-count="lane.count" />
        <RuneSelector v-if="state == 'runes' && championData.gameCount > 0" 
            style="margin: auto; margin-top: 40px;" 
            :runes="lane.runes!!" />
        <ItemViewer v-if="state == 'items' && championData.gameCount > 0" 
            style="margin:auto; margin-top: 40px;" 
            :builds="lane.builds!!" />
        <ItemTree v-if="state == 'alternatives' && championData.gameCount > 0"
            style="margin: auto; margin-top: 40px; width: fit-content;"
            :tree="lane.builds!!.tree" />
        <h2 v-if="championData.gameCount == 0" 
            style="margin: auto; margin-top: 20px; width: fit-content;">
            Sorry, there is no data for this champion :(
        </h2>
    </div>

    </div>
</template>

<style>
#alias-content-wrapper {
    display: flex; 
    /* min-height: 100vh;  */
    align-items: stretch; 
    width: 100%;

    overflow: hidden;
}
#champion-content {
    margin-top: 64px; 
    margin-left: 39px; 
    width: 100%;
}
@media only screen and (max-width: 650px) {
    #champion-content {
        margin: auto;
        margin-top: 10px;
    }
    #champion-title {
        margin:auto;
    }
}
@media only screen and (max-width: 1200px) {
    #alias-content-wrapper {
        flex-direction: column;
        padding-bottom: 120px;
        margin-top: 20px;
    }
}
</style>