<template>
  <div class="col-sm-8">
    <div class="table-responsive-xl" style="max-width:45rem">
      <table class="table table-sm table-striped">
        <thead class="thead-dark">
          <tr>
            <th>Summary</th>
            <th>AB</th>
            <th>H</th>
            <th>HR</th>
            <th>BA</th>
            <th>R</th>
            <th>RBI</th>
            <th>SB</th>
            <th>OBP</th>
            <th>SLG</th>
            <th>OPS</th>
            <th>wOBA</th>
          </tr>
        </thead>
        <tbody id="batter-summary-table">
          <tr v-if="currentSeasonBatting">
            <td>Season {{ currentSeasonBatting.player.season }}</td>
            <td>{{ currentSeasonBatting.ab }}</td>
            <td>{{ currentSeasonBatting.hit }}</td>
            <td>{{ currentSeasonBatting.hr }}</td>
            <td>{{ currentSeasonBatting.avg.toFixed(3) }}</td>
            <td>{{ currentSeasonBatting.run }}</td>
            <td>{{ currentSeasonBatting.rbi }}</td>
            <td>{{ currentSeasonBatting.sb }}</td>
            <td>{{ currentSeasonBatting.obp.toFixed(3) }}</td>
            <td>{{ currentSeasonBatting.slg.toFixed(3) }}</td>
            <td>{{ currentSeasonBatting.ops.toFixed(3) }}</td>
            <td>{{ currentSeasonBatting.woba.toFixed(3) }}</td>
          </tr>
          <tr v-if="currentPostSeasonBatting">
            <td>S{{ currentPostSeasonBatting.player.season }} / Playoffs</td>
            <td>{{ currentPostSeasonBatting.ab }}</td>
            <td>{{ currentPostSeasonBatting.hit }}</td>
            <td>{{ currentPostSeasonBatting.hr }}</td>
            <td>{{ currentPostSeasonBatting.avg.toFixed(3) }}</td>
            <td>{{ currentPostSeasonBatting.run }}</td>
            <td>{{ currentPostSeasonBatting.rbi }}</td>
            <td>{{ currentPostSeasonBatting.sb }}</td>
            <td>{{ currentPostSeasonBatting.obp.toFixed(3) }}</td>
            <td>{{ currentPostSeasonBatting.slg.toFixed(3) }}</td>
            <td>{{ currentPostSeasonBatting.ops.toFixed(3) }}</td>
            <td>{{ currentPostSeasonBatting.woba.toFixed(3) }}</td>
          </tr>
        </tbody>
        <tfoot v-if="careerBattingStat" id="batter-summary-footer">
          <tr>
            <th>Career</th>
            <th>{{ careerBattingStat.ab }}</th>
            <th>{{ careerBattingStat.hit }}</th>
            <th>{{ careerBattingStat.hr }}</th>
            <th>{{ careerBattingStat.avg.toFixed(3) }}</th>
            <th>{{ careerBattingStat.run }}</th>
            <th>{{ careerBattingStat.rbi }}</th>
            <th>{{ careerBattingStat.sb }}</th>
            <th>{{ careerBattingStat.obp.toFixed(3) }}</th>
            <th>{{ careerBattingStat.slg.toFixed(3) }}</th>
            <th>{{ careerBattingStat.ops.toFixed(3) }}</th>
            <th>{{ careerBattingStat.woba.toFixed(3) }}</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</template>

<script lang="ts">
import { aggregateBattingStats, type BattingStat } from '@/services/battingStatsService'
import type { PropType } from 'vue'

export default {
  name: 'PlayerBattingSummaryTable',
  props: {
    currentSeasonBatting: { type: Object as PropType<BattingStat>, required: false },
    currentPostSeasonBatting: { type: Object as PropType<BattingStat>, required: false },
    regularSeasonBattingStats: { type: Array<BattingStat>, required: true }
  },
  computed: {
    careerBattingStat(): BattingStat | undefined {
      if (this.regularSeasonBattingStats.length > 0) {
        // old site behavior just summed regular season stats for the career line total
        return aggregateBattingStats(this.regularSeasonBattingStats)
      }

      return undefined
    },
  }
}
</script>
