<template>
  <v-container>
    <h1>#{{ game.id }} - {{ game.title }}</h1>
    <h2>GameMaster: {{ game.gamemaster }}</h2>
    <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></v-container
  >
</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 { Game, Character, GameCharacter } from '../types'
import { watch, ref } from 'vue'
import { VDataTable } from 'vuetify/components'
import { useRoute } from 'vue-router'
import axios from 'axios'

type ReadonlyHeaders = VDataTable['$props']['headers']

const route = useRoute()

const pickHeaders: ReadonlyHeaders = [
  { 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: ReadonlyHeaders = [
  { 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<Game>({
  id: 0,
  title: '',
  gamemaster: '',
  payoutEB: 0,
  payoutIP: 0,
  payoutLoot: '',
  status: '',
  postdate: 0
})
const picks = ref<GameCharacter[]>([])
const apps = ref<GameCharacter[]>([])

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>
