<template>
  <div class="d-flex flex-column">
    <v-select class="date-selector" v-model="dateSelect" variant="underlined" :items="dateItems">
    </v-select>
    <div class="stat-bar d-flex flex-row justify-space-around">
      <div class="d-flex flex-column">
        <v-label class="title">Completed Games</v-label>
        <v-label>{{ gameStats.Complete }}</v-label>
      </div>
      <div class="d-flex flex-column">
        <v-label class="title">Postponed Games</v-label>
        <v-label>{{ gameStats.Postponed }}</v-label>
      </div>
      <div class="d-flex flex-column">
        <v-label class="title">Total / Average EB</v-label>
        <v-label
          >{{ Math.floor(gameStats.TotalEB) }} / {{ Math.floor(gameStats.AverageEB) }}</v-label
        >
      </div>
      <div class="d-flex flex-column">
        <v-label class="title">Total / Average IP</v-label>
        <v-label
          >{{ Math.floor(gameStats.TotalIP) }} / {{ Math.floor(gameStats.AverageIP) }}</v-label
        >
      </div>
    </div>
    <div class="role-table d-flex flex-column">
      <v-table>
        <thead>
          <tr>
            <th class="text-left">Role</th>
            <th class="text-center">Characters</th>
            <th class="text-center">App Count</th>
            <th class="text-center">Games Played</th>
            <th class="text-center">% Games With Role</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="roleStat, roleName in roleStats">
            <td>{{ roleName }}</td>
            <td class="text-center">{{ roleStat.active }}</td>
            <td class="text-center">{{ roleStat.apps }}</td>
            <td class="text-center">{{ roleStat.picks }}</td>
            <td class="text-center">{{ Math.floor((roleStat.picks / gameStats.Complete) * 100)}}%</td>
          </tr>
        </tbody>
      </v-table>
    </div>
  </div>
</template>

<style>
.date-selector {
  margin-left: 15px;
  margin-right: 15px;
}
.graph-selector {
  margin-left: 15px;
  margin-right: 15px;
}
.stat-bar {
  padding: 10px;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 20px;
  .title {
    font-weight: bold;
  }
}
.role-table {
  margin-left: 15px;
  margin-right: 15px;
}
</style>

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

const dateSelect = ref(-1)

const dateItems = buildDateItems()

const gameStats = ref({})

const roleStats = ref({})

async function loadData() {
  const gameStatsResponse = await axios.post('/api/serverstats/gamestats', {
    monthId: dateSelect.value
  })
  gameStats.value = gameStatsResponse.data

  const roleStatsResponse = await axios.post('/api/serverstats/rolestats', {
    monthId: dateSelect.value
  })
  roleStats.value = roleStatsResponse.data
}

function buildDateItems() {
  const items = [{title: "All Time", value: -1}]

  const date = new Date()
  while (date.getUTCFullYear() != 2023 || date.getUTCMonth() != 0) {
    console.log(buildDateEntry(date))
    items.push(buildDateEntry(date))
    date.setUTCMonth(date.getUTCMonth() - 1)
  }
  items.push(buildDateEntry(date))

  return items
}

function buildDateEntry(date: Date) {
  const monthId = dateToMonthId(date)
  return {
    title: date.toLocaleString('en-us',{month:'short', year:'numeric'}),
    value: monthId
  }
}

function dateToMonthId(date: Date) {
  return (((date.getUTCFullYear() - 2023) * 12) + (date.getUTCMonth()))
}

watch(dateSelect, async (newValue, oldValue) => {
  loadData()
})

onMounted(async () => {
  loadData()
  console.log(buildDateItems())
})
</script>
