<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">
      <div class="result-box">
        <h3>Picks</h3>
        <div v-for="pick in picks">
          {{ pick.pickedCharacter.playerName }} as {{ pick.characterName }}
        </div>
      </div>
      <div class="result-box">
        <h3>Payout</h3>
        <div>{{ game.payoutEB }} eb</div>
        <div>{{ game.payoutIP }} IP</div>
        <div>{{ game.payoutLoot }}</div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="d-flex flex-row">
      <div class="character-list">
        <h3>{{ picks.length }} Character Picks</h3>
        <v-data-table-virtual :headers="pickHeaders" :items="picks" height="500px" fixed-header>
          <template v-slot:item.characterId="{ item }">
            <a v-bind:href="`/#/characters/${item.characterId}`">{{ item.characterId }}</a>
          </template>
          <template v-slot:item.characterName="{ item }">
            <a v-bind:href="`/#/characters/${item.characterId}`">{{ item.characterName }}</a>
          </template>
        </v-data-table-virtual>
      </div>
      <div class="character-list">
        <h3>{{ apps.length }} Character Apps</h3>
        <v-data-table-virtual :headers="appHeaders" :items="apps" height="500px" fixed-header>
          <template v-slot:item.characterId="{ item }">
            <a v-bind:href="`/#/characters/${item.characterId}`">{{ item.characterId }}</a>
          </template>
          <template v-slot:item.characterName="{ item }">
            <a v-bind:href="`/#/characters/${item.characterId}`">{{ item.characterName }}</a>
          </template>
        </v-data-table-virtual>
      </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: 20px;
  margin-top: 20px;
}

.character-list {
  margin: 20px;
  h3 {
    margin-bottom: 10px;
  }
}
</style>

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

const route = useRoute()

const pickHeaders = [
  { title: 'ID', align: 'start', key: 'characterId' },
  { title: 'Character', align: 'start', key: 'characterName' },
  { title: 'Status', align: 'start', key: 'pickedCharacter.status' },
  { title: 'Player', align: 'start', key: 'pickedCharacter.playerName' }
]

const appHeaders = [
  { title: 'ID', align: 'start', key: 'characterId' },
  { title: 'Character', align: 'start', key: 'characterName' },
  { title: 'Status', align: 'start', key: 'appliedCharacter.status' },
  { title: 'Player', align: 'start', key: 'appliedCharacter.playerName' }
]

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}`)
  console.log(response)
  game.value = response.data
  loadPicks()
  loadApps()
}

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

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