<script setup lang="ts">
import { AccountApiClient, type Account } from '@/api/account'
import { ProfileApiClient, type Profile } from '@/api/profile'
import { onMounted, ref, type Ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const profile: Ref<Profile | undefined> = ref(undefined)
const accounts: Ref<Account[]> = ref([])

onMounted(async () => {
  const profileName = route.params.name
  if (Array.isArray(profileName)) {
    await router.replace('/')
    return
  }
  try {
    const api = new ProfileApiClient()
    profile.value = await api.getProfile(profileName)
  } catch (err) {
    console.error(err)
    await router.replace('/')
    return
  }

  try {
    const api = new AccountApiClient(route)
    accounts.value = await api.getAccounts()
  } catch (err) {
    console.error('Failed to load accounts', err)
  }
})
</script>
<template>
  <div class="app-page-container">
    <h1 class="app-page-title">Profile {{ profile?.name }}</h1>
    <p>This is the page for the profile!</p>
    <ul>
      <li
        v-for="account in accounts"
        :key="account.id"
      >
        <p>
          Account {{ account.id }} for currency {{ account.currency }} Number suffix:
          {{ account.numberSuffix }}
        </p>
      </li>
    </ul>
  </div>
</template>
