/**
 * Composable for fetching and managing rune styles and keystones
 * Transforms rune data into format needed for display components
 */
export const useRuneStyles = () => {
  const { data: perksData } = useFetch('/api/cdragon/perks')
  const { data: stylesData } = useFetch('/api/cdragon/perkstyles')
  console.log(stylesData.value)

  const perks = reactive(new Map<number, Perk>())
  watch(
    perksData,
    newPerks => {
      if (Array.isArray(newPerks)) {
        perks.clear()
        for (const perk of newPerks) {
          if (perk?.id) {
            perks.set(perk.id, perk)
          }
        }
      }
    },
    { immediate: true }
  )

  const perkStyles = reactive(new Map<number, PerkStyle>())
  watch(
    stylesData,
    newPerkStyles => {
      if (Array.isArray(newPerkStyles?.styles)) {
        perkStyles.clear()
        for (const perkStyle of newPerkStyles.styles) {
          if (perkStyle?.id) {
            perkStyles.set(perkStyle.id, perkStyle)
          }
        }
      }
    },
    { immediate: true }
  )

  return {
    perks,
    perkStyles
  }
}