<template>
  <div v-if="fieldingStats.length" class="col-sm-6">
    <h3>Team Fielding {{ isRegularSeason ? '' : ' - Postseason' }}</h3>
    <div class="table-responsive-xl" style="max-width:40rem">
      <table class="table table-sm table-striped" id="table-fielding-stats">
        <thead class="thead-dark">
          <tr>
            <th>Season</th>
            <th>Pos</th>
            <th>XCh</th>
            <th>XH</th>
            <th>E</th>
            <th>PB</th>
            <th>SBa</th>
            <th>CSc</th>
            <th>CS%</th>
            <th>wF%</th>
          </tr>
        </thead>
        <tbody id="career-fielding-table">
          <tr v-for="stat in fieldingStats" :key="`${stat.player.name}-${stat.pos}`">
            <td>
              <RouterLink :to="{ name: 'player', params: { seasonNumber: seasonNumber, playerName: stat.player.name } }">
                {{ stat.player.name }}
              </RouterLink>
            </td>
            <td>{{ stat.pos }}</td>
            <td>{{ stat.xCheckCount }}</td>
            <td>{{ stat.hit }}</td>
            <td>{{ stat.error }}</td>
            <td>{{ stat.passedBallCount }}</td>
            <td>{{ stat.stolenBaseCheckCount }}</td>
            <td>{{ stat.caughtStealingCount }}</td>
            <td>{{ formatCaughtStealingPercent(stat) }}</td>
            <td>{{ formatWeightedFieldingPercent(stat) }}</td>
          </tr>
        </tbody>
        <tfoot>
          <tr v-for="stat in totalFieldingStat" id="career-fielding-footer" :key="stat.pos">
            <th>Total</th>
            <th>{{ stat.pos }}</th>
            <th>{{ stat.xCheckCount }}</th>
            <th>{{ stat.hit }}</th>
            <th>{{ stat.error }}</th>
            <th>{{ stat.passedBallCount }}</th>
            <th>{{ stat.stolenBaseCheckCount }}</th>
            <th>{{ stat.caughtStealingCount }}</th>
            <th>{{ formatCaughtStealingPercent(stat) }}</th>
            <th>{{ formatWeightedFieldingPercent(stat) }}</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</template>
<script lang="ts">
import { aggregateFieldingStats, fetchFieldingStatsBySeasonAndTeamId, totaledFieldingStats, type FieldingStat } from '@/services/fieldingStatsService'
import { POS_MAP } from '@/services/utilities'

export default {
  name: 'TeamFieldingTable',
  props: {
    seasonNumber: { type: Number, required: true },
    teamId: { type: Number, required: true },
    isRegularSeason: { type: Boolean, required: true }
  },
  data() {
    return {
      fieldingStats: [] as FieldingStat[]
    }
  },
  computed: {
    totalFieldingStat(): FieldingStat[] {
      if (this.fieldingStats.length > 0) {
        const totaledStats = aggregateFieldingStats(this.fieldingStats).sort((s1, s2) => POS_MAP[s1.pos] - POS_MAP[s2.pos])

        const allPositionsTotalStat = totaledFieldingStats(this.fieldingStats)
        if (allPositionsTotalStat !== undefined) {
          totaledStats.push(allPositionsTotalStat)
        }

        return totaledStats
      }

      return []
    }
  },
  created() {
    this.fetchData()
  },
  watch: {
    teamId(newValue, oldValue) {
      if (newValue !== oldValue)
        this.fetchData()
    }
  },
  methods: {
    async fetchData(): Promise<void> {
      const unsortedFieldingStats: FieldingStat[] = await fetchFieldingStatsBySeasonAndTeamId(this.seasonNumber, this.teamId, this.isRegularSeason)
      this.fieldingStats = unsortedFieldingStats.sort((s1, s2) => s2.xCheckCount - s1.xCheckCount)
    },
    formatCaughtStealingPercent(stat: FieldingStat): string {
      if (stat.stolenBaseCheckCount === 0 || Number.isNaN(stat.caughtStealingPercent)) {
        return '-'
      }

      return `${(stat.caughtStealingPercent * 100).toFixed(1)}%`
    },
    formatWeightedFieldingPercent(stat: FieldingStat): string {
      return stat.weightedFieldingPercent.toFixed(3)
    }
  }
}
</script>
