<template>
  <v-container>
    <h1>{{ character.characterName }} - {{ character.role }}</h1>
    <h2>Status: {{ character.status }}</h2>
    <h2>Player: {{ character.playerName }}</h2>
    <div>Total Game EB: {{ earnedEB }} --- Total Game IP: {{ earnedIP }}</div>
    <div>
      Games Played: {{ gamesPlayedCount }} --- Games Applied: {{ gamesAppliedCount }} -- Pick Rate:
      {{ pickRate.toFixed(2) }}%
    </div>
    <div>Last Game: {{ lastPlayedPostDate }}</div>
    <div class="d-flex flex-row">
      <div class="flex-column game-list">
        <h3 class="game-list-title">Games Played</h3>
        <GameTable :gameList="games.played"></GameTable>
      </div>
      <div class="flex-column game-list">
        <h3 class="game-list-title">Games Applied</h3>
        <game-table :gameList="games.applied"></game-table>
      </div>
    </div>
  </v-container>
</template>

<style>
  .game-list {
    margin: 20px;
    margin-top: 25px;
  }
  .game-list-title{
    margin-bottom: 10px;
  }
</style>

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

const route = useRoute()

const characterId = ref(route.params.characterId)
const character = ref({})
const games = ref({})
const earnedEB = ref(0)
const earnedIP = ref(0)
const gamesPlayedCount = ref(0)
const gamesAppliedCount = ref(0)
const pickRate = ref(0)
const lastPlayedPostDate = ref({})

async function loadCharacterDetails() {
  const characterResponse = await axios.get(`/api/character/${characterId.value}`)
  const gameDetails = await axios.post(`/api/character/${characterId.value}/gameHistory`)

  character.value = characterResponse.data
  games.value = {
    played: gameDetails.data.characterPickedForGame,
    applied: gameDetails.data.characterAppliedForGame
  }
}

function calculateDerivedEarnings(gamesPlayedList) {
  let runningEarnedEb = 0
  let runningEarnedIp = 0
  for (let game in gamesPlayedList) {
    runningEarnedEb += gamesPlayedList[game]['payoutEB']
    runningEarnedIp += gamesPlayedList[game]['payoutIP']
  }
  earnedEB.value = runningEarnedEb
  earnedIP.value = runningEarnedIp
}

function calculateDerivedGameStats(gamesPlayedList, gamesAppliedList) {
  gamesPlayedCount.value = gamesPlayedList.length
  gamesAppliedCount.value = gamesAppliedList.length
  pickRate.value = (gamesPlayedList.length / gamesAppliedList.length) * 100
}

function calculateDerivedLastPlayedPostDate(gamesPlayedList) {
  if (gamesPlayedList.length === 0) {
    lastPlayedPostDate.value = 'N/A'
  } else {
    lastPlayedPostDate.value = new Date(gamesPlayedList[gamesPlayedList.length - 1].postdate * 1000)
      .toISOString()
      .split('T')[0]
  }
}

watch(games, (newValue, oldValue) => {
  calculateDerivedLastPlayedPostDate(newValue.played)
  calculateDerivedEarnings(newValue.played)
  calculateDerivedGameStats(newValue.played, newValue.applied)
})

onMounted(async () => {
  loadCharacterDetails()
})
</script>
