<template>
  <div class="game-title-box">
    <h1>#{{ game.id }} - {{ game.title }}</h1>
  </div>
  <div class="gm-title-box">
    <h2>GameMaster: {{ game.gamemaster }}</h2>
  </div>
  <div class="container">
    <div class="d-flex flex-row justify-space-evenly">
      <div class="result-box">
        <h3>Payout</h3>
        <div>{{ game.payoutEB }} eb</div>
        <div>{{ game.payoutIP }} IP</div>
        <div>{{ game.payoutLoot }}</div>
      </div>

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

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

<style>
.game-title-box {
  margin-top: 25px;
  margin-left: 20px;
}

.gm-title-box {
  margin-top: 5px;
  margin-left: 20px;
}

.result-box {
  margin: 10px;
  margin-top: 40px;
}
</style>

<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>
