<template>
  <div v-for="v in characters">
    <CharacterCard :character="v" />
  </div>
</template>

<script lang="ts" setup>
import CharacterCard from './CharacterCard.vue';

const { accounts, invs } = useStoreRef()

const characters = ref([] as string[])

watch(invs, () => {
  characters.value = [...new Set([...characters.value, ...invs.value.keys()])]
}, { deep: true })

const session = storage.GetSession()
const api: LTOApi = new LTOApiv0(session)
api.GetAccounts().then(xs => {
  xs.forEach(x => {
    accounts.value.add(x)
    api.GetCharacters(x).then(chars => {
      chars.forEach(char => {
        log.debug("new character", char)
        invs.value.set(char.path, char)
      })
    })
  })
})

</script>

<script lang="ts">
import { defineComponent, computed, PropType, defineProps, defineEmits, ref, watch } from 'vue';
import { LTOApi, LTOApiv0 } from '../lib/lifeto';
import { LoginHelper, Session } from '../lib/session';
import { storage } from '../session_storage';
import { useStore, useStoreRef } from '../state/state';
import log from 'loglevel';

</script>
