<script setup lang="ts">
const props = defineProps<{
    runes: Array<{count: number, 
        primaryStyle: number, 
        secondaryStyle: number, 
        selections: Array<number>, 
        pickrate: number}>
}>()

const currentlySelectedPage = ref(0)
const primaryStyles : Ref<Array<PerkStyle>> = ref(Array(props.runes.length))
const secondaryStyles : Ref<Array<PerkStyle>> = ref(Array(props.runes.length))
const keystoneIds : Ref<Array<number>> = ref(Array(props.runes.length))

let { data: perks_data } : PerksResponse = await useFetch(CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/perks.json")
const perks = reactive(new Map())
for(let perk of perks_data.value) {
    perks.set(perk.id, perk)
}

let { data: stylesData } : PerkStylesResponse = await useFetch(CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/perkstyles.json")
watch(() => props.runes, (newRunes, oldRunes) => {
    currentlySelectedPage.value = 0
    primaryStyles.value = Array(props.runes.length)
    secondaryStyles.value = Array(props.runes.length)
    keystoneIds.value = Array(props.runes.length)

    refreshStylesKeystones()
})

function refreshStylesKeystones() {
    for(let style of stylesData.value.styles) {
        for(let rune of props.runes) {
            if(style.id == rune.primaryStyle) {
                primaryStyles.value[props.runes.indexOf(rune)] = style
                for(let perk of style.slots[0].perks) {
                    if(rune.selections.includes(perk)) {
                        keystoneIds.value[props.runes.indexOf(rune)] = perk
                    }
                }
            }
            if(style.id == rune.secondaryStyle) {
                secondaryStyles.value[props.runes.indexOf(rune)] = style
            }
        }
    }
}

refreshStylesKeystones()

function runeSelect(index: number) {
    currentlySelectedPage.value = index
}

</script>

<template>
    <div style="width: fit-content;">
    <RunePage v-if="runes[currentlySelectedPage] != undefined && runes[currentlySelectedPage] != null" 
        style="margin:auto; width: fit-content;" 
        :primaryStyleId="runes[currentlySelectedPage].primaryStyle" 
        :secondaryStyleId="runes[currentlySelectedPage].secondaryStyle" 
        :selectionIds="runes[currentlySelectedPage].selections" />
    <div style="display: flex; margin-top: 20px; justify-content: center;">
    <div v-for="(_, i) in runes" :class="'rune-selector-entry ' + (i == currentlySelectedPage ? 'rune-selector-entry-selected' : '')" @click="runeSelect(i)">
        <div class="rs-styles-container">
        <NuxtImg class="rs-style-img" v-if="primaryStyles[i] != null && primaryStyles[i] != undefined" 
            style="margin: auto;" :src="CDRAGON_BASE + mapPath(primaryStyles[i].iconPath)" />
        <NuxtImg class="rs-style-img" v-if="keystoneIds[i] != null && keystoneIds[i] != undefined" 
            width="34" :src="CDRAGON_BASE + ( mapPath(perks.get(keystoneIds[i]).iconPath))"/>
        <NuxtImg class="rs-style-img" v-if="secondaryStyles[i] != null && secondaryStyles[i] != undefined" 
            style="margin: auto;" :src="CDRAGON_BASE + mapPath(secondaryStyles[i].iconPath)" />
        </div>
        <h3 class="rs-pickrate">{{ (runes[i].pickrate * 100).toFixed(2) }}% pick.</h3>
    </div>
    </div>
    </div>
</template>

<style>
.rune-selector-entry {
    width: 200px;
    height: 120px;

    margin-left: 10px;
    margin-right: 10px;

    border-radius: 8%;
    border: 1px solid var(--color-on-surface);
}
.rune-selector-entry:hover {
    cursor: pointer;
}
.rune-selector-entry-selected {
    background-color: var(--color-surface-darker);
}
.rs-styles-container {
    display: flex; 
    margin-top: 20px;
}
.rs-pickrate {
    text-align: center; 
    margin-top: 10px;
}
@media only screen and (max-width: 650px) {
    .rune-selector-entry {
        width: 100px;
        height: 60px;

        margin-left: 5px;
        margin-right: 5px;
    }
    .rs-styles-container {
        margin-top: 17px;
    }
    .rs-pickrate {
        margin-top: 20px;
    }
    .rs-style-img {
        width: 24px;
        height: 24px;
    }
}
</style>