<script setup>
const props = defineProps({
    // Runes styles: domination, precision, sorcery, inspiration, resolve
    primaryStyleId: {
    type: String,
    required: true
    },
    secondaryStyleId: {
        type:String,
        required: true
    },
    selectionIds: {
        type:Array,
        required: false,
        default: []
    }
})

const primaryStyle = ref({slots:[]})
const secondaryStyle = ref({slots:[]})

let { data: perks_data } = await useFetch("https://raw.communitydragon.org/latest/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 } = await useFetch("https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/perkstyles.json")
watch(() => props.primaryStyleId, async (newP, oldP) => {refreshStyles()})
watch(() => props.secondaryStyleId, async (newP, oldP) => {refreshStyles()})

function refreshStyles() {
    for(let style of stylesData.value.styles) {
        if(style.id == props.primaryStyleId) {
            primaryStyle.value = style
        }
        if(style.id == props.secondaryStyleId) {
            secondaryStyle.value = style
        }
    }
}
refreshStyles()

</script>

<template>
    <div style="display: flex;">
    <div class="rune-holder">
        <div class="rune-slot"><NuxtImg style="margin: auto;" :src="CDRAGON_BASE + mapPath(primaryStyle.iconPath)" /></div>
        <div class="rune-slot" v-for="slot in primaryStyle.slots.slice(0, 1)">
            <NuxtImg width="48" v-for="perk in slot.perks" :class="'rune-img rune-keystone ' + (props.selectionIds.includes(perk) ? 'rune-activated' : '')" :src="'https://raw.communitydragon.org/latest/' + mapPath(perks.get(perk).iconPath)"/>
        </div>    
        <div class="rune-slot" v-for="slot in primaryStyle.slots.slice(1, 4)">
            <NuxtImg width="48" v-for="perk in slot.perks" :class="'rune-img ' + (props.selectionIds.includes(perk) ? 'rune-activated' : '')" :src="'https://raw.communitydragon.org/latest/' + mapPath(perks.get(perk).iconPath)"/>
        </div>
    </div>
    <div class="rune-spacer-bar"></div>
    <div class="rune-holder" style="align-content: end">
        <div class="rune-slot"><img style="margin: auto;" :src="CDRAGON_BASE + mapPath(secondaryStyle.iconPath)" /></div>
        <div class="rune-slot" v-for="slot in secondaryStyle.slots.slice(1, 4)">
            <NuxtImg width="48" v-for="perk in slot.perks" :class="'rune-img ' + (props.selectionIds.includes(perk) ? 'rune-activated' : '')" :src="'https://raw.communitydragon.org/latest/' + mapPath(perks.get(perk).iconPath)"/>
        </div>
        <!-- <div class="rune-slot mini" v-for="slot in primaryStyle.slots.slice(4, 7)">
            <img width="32" v-for="perk in slot.perks" :class="'rune-img ' + (props.selectionIds.includes(perk) ? 'rune-activated' : '')" :src="'https://raw.communitydragon.org/latest/' + mapPath(perks.get(perk).iconPath)"/>
        </div> -->
    </div>
        
    </div>
</template>

<style>
.rune-holder {
    /* align-content: end; */
    justify-content: center;
}
.rune-slot {
    width: calc(48*3px + 60px);
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    margin-bottom: 40px;
}
.mini {
    margin: auto;
    width: calc(32*3px + 60px);
    margin-top: 10px;
    margin-bottom: 10px;
}
.rune-img {
    max-width: 100%;
    overflow: hidden;
    filter: grayscale(1);
    border: 1px var(--color-on-surface) solid;
    border-radius:50%;
}
.rune-keystone {
    border: none;
}
.rune-activated {
    filter: none;
}
.rune-spacer-bar {
    margin-left: 20px;
    margin-right: 20px;
    border: 1px var(--color-on-surface) solid;
}
</style>