<script setup lang="ts">
import { AccountApiClient, type Account } from '@/api/account'
import { useProfileStore } from '@/stores/profile-store'
import { onMounted, ref, type Ref } from 'vue'

const profileStore = useProfileStore()

const accounts: Ref<Account[]> = ref([])

onMounted(async () => {
  if (!profileStore.state) {
    console.warn('No profile is selected.')
    return
  }

  const accountApi = new AccountApiClient(profileStore.state)
  accountApi.getAccounts().then(result => accounts.value = result)
    .catch(err => console.error(err))
})
</script>
<template>
  <div class="app-module">
    <h2>Accounts</h2>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Currency</th>
          <th>Number</th>
          <th>Type</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="account in accounts" :key="account.id">
          <td>{{ account.name }}</td>
          <td>{{ account.currency }}</td>
          <td>...{{ account.numberSuffix }}</td>
          <td>{{ account.type }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<style lang="css"></style>
