<script setup lang="ts">
import { CDRAGON_BASE, mapPath } from '~/utils/cdragon'
import type { PerkStyle, Perk } from '~/types/cdragon'

const props = defineProps<{
  primaryStyleId: number
  secondaryStyleId: number
  selectionIds: Array<number>
}>()

const primaryStyle: Ref<PerkStyle> = ref({ id: 0, name: '', iconPath: '', slots: [] })
const secondaryStyle: Ref<PerkStyle> = ref({ id: 0, name: '', iconPath: '', slots: [] })

const { data: perks_data }: { data: Ref<Array<Perk>> } = await useFetch('/api/cdragon/perks')
const perks = reactive(new Map())
for (const perk of perks_data.value) {
  perks.set(perk.id, perk)
}

const { data: stylesData }: { data: Ref<{ styles: Array<PerkStyle> }> } =
  await useFetch('/api/cdragon/perkstyles')
watch(
  () => props.primaryStyleId,
  async (_newP, _oldP) => {
    refreshStyles()
  }
)
watch(
  () => props.secondaryStyleId,
  async (_newP, _oldP) => {
    refreshStyles()
  }
)

function refreshStyles() {
  for (const 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
          class="rune-style-img"
          style="margin: auto"
          :src="CDRAGON_BASE + mapPath(primaryStyle.iconPath)"
        />
      </div>
      <div
        v-for="(slot, slotIndex) in primaryStyle.slots.slice(0, 1)"
        :key="slotIndex"
        class="rune-slot"
      >
        <RuneIcon
          v-for="perkId in slot.perks"
          :key="perkId"
          :perk="perks.get(perkId)"
          :size="48"
          :is-active="props.selectionIds.includes(perkId)"
          :is-keystone="true"
        />
      </div>
      <div
        v-for="(slot, slotIndex) in primaryStyle.slots.slice(1, 4)"
        :key="slotIndex"
        class="rune-slot"
      >
        <RuneIcon
          v-for="perkId in slot.perks"
          :key="perkId"
          :perk="perks.get(perkId)"
          :size="48"
          :is-active="props.selectionIds.includes(perkId)"
        />
      </div>
    </div>
    <div class="rune-spacer-bar" />
    <div class="rune-holder" style="align-content: end">
      <div class="rune-slot">
        <img
          class="rune-style-img"
          style="margin: auto"
          :src="CDRAGON_BASE + mapPath(secondaryStyle.iconPath)"
        />
      </div>
      <div
        v-for="(slot, slotIndex) in secondaryStyle.slots.slice(1, 4)"
        :key="slotIndex"
        class="rune-slot"
      >
        <RuneIcon
          v-for="perkId in slot.perks"
          :key="perkId"
          :perk="perks.get(perkId)"
          :size="48"
          :is-active="props.selectionIds.includes(perkId)"
        />
      </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-spacer-bar {
  margin-left: 20px;
  margin-right: 20px;
  border: 1px var(--color-on-surface) solid;
}
.rune-style-img {
  width: 48px;
  height: 48px;
}

@media only screen and (max-width: 650px) {
  .rune-slot {
    width: calc(24 * 3px + 30px);
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .rune-style-img {
    width: 24px;
    height: 24px;
  }
  .rune-spacer-bar {
    margin-left: 10px;
    margin-right: 10px;
  }
  .rune-icon {
    width: 24px !important;
    height: 24px !important;
  }
}
</style>
