<template>
  <div>
    <h1>#{{ game.id }} - {{ game.title }}</h1>
  </div>
  <div>
    <h2>GameMaster: {{ game.gamemaster }}</h2>
  </div>
  <div>
    <h3>Payout</h3>
    <div>{{ game.payoutEB }} eb</div>
    <div>{{ game.payoutIP }} IP</div>
    <div>{{ game.payoutLoot }}</div>
  </div>

  <div>
    <h3>Picks</h3>
    <div v-for="pick in picks">
      {{ pick.characterName }}
    </div>
  </div>

  <div>
    <h3>Apps</h3>
    <div v-for="app in apps">
      {{ app.characterName }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { watch, ref } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'

const route = useRoute()

const gameId = ref(route.params.gameId)
const game = ref({})
const picks = ref({})
const apps = ref({})

loadGameDetails()

watch(
  () => route.params.gameId,
  (newId, oldId) => {
    gameId.value = newId
    loadGameDetails()
  }
)

async function loadGameDetails() {
  const response = await axios.get(`/api/game/${gameId.value}`)
  game.value = response.data
  loadPicks()
  loadApps()
}

async function loadPicks() {
  const response = await axios.post(`/api/game/${gameId.value}/picks`)
  picks.value = response.data
}

async function loadApps() {
  const response = await axios.post(`/api/game/${gameId.value}/apps`)
  apps.value = response.data
}
</script>
