<template>
  <div v-if="hasBattingStats" class="row" id="career-batting-row">
    <div class="col-sm-12">
      <h3>Batting Stats</h3>
      <div class="table-responsive-xl">
        <table class="table table-sm table-striped" id="career-batting">
          <thead class="thead-dark">
            <tr>
              <th>Season</th>
              <th>PA</th>
              <th>AB</th>
              <th>R</th>
              <th>H</th>
              <th>2B</th>
              <th>3B</th>
              <th>HR</th>
              <th>RBI</th>
              <th>SB</th>
              <th>CS</th>
              <th>BB</th>
              <th>SO</th>
              <th>BA</th>
              <th>OBP</th>
              <th>SLG</th>
              <th>OPS</th>
              <th>wOBA</th>
              <th>K%</th>
              <th>BPHR</th>
              <th>BPFO</th>
              <th>BP1B</th>
              <th>BPLO</th>
              <th>GIDP</th>
              <th>HBP</th>
              <th>SAC</th>
              <th>IBB</th>
            </tr>
          </thead>
          <tbody id="career-batting-table">
            <tr v-for="stat in sortedRegularAndPostSeasonBatting">
              <td>S{{ stat.seasonNumber }}{{ stat.isRegularSeason ? '' : ' / Playoffs' }}</td>
              <td>{{ stat.pa }}</td>
              <td>{{ stat.ab }}</td>
              <td>{{ stat.run }}</td>
              <td>{{ stat.hit }}</td>
              <td>{{ stat.double }}</td>
              <td>{{ stat.triple }}</td>
              <td>{{ stat.hr }}</td>
              <td>{{ stat.rbi }}</td>
              <td>{{ stat.sb }}</td>
              <td>{{ stat.cs }}</td>
              <td>{{ stat.bb }}</td>
              <td>{{ stat.so }}</td>
              <td>{{ stat.avg.toFixed(3) }}</td>
              <td>{{ stat.obp.toFixed(3) }}</td>
              <td>{{ stat.slg.toFixed(3) }}</td>
              <td>{{ stat.ops.toFixed(3) }}</td>
              <td>{{ stat.woba.toFixed(3) }}</td>
              <td>{{ calculateStrikeoutPercent(stat) }}</td>
              <td>{{ stat.bphr }}</td>
              <td>{{ stat.bpfo }}</td>
              <td>{{ stat.bp1b }}</td>
              <td>{{ stat.bplo }}</td>
              <td>{{ stat.gidp }}</td>
              <td>{{ stat.hbp }}</td>
              <td>{{ stat.sac }}</td>
              <td>{{ stat.ibb }}</td>
            </tr>
          </tbody>
          <tfoot>
            <tr v-if="careerBattingStat" id="career-batting-footer">
              <th>Career</th>
              <th>{{ careerBattingStat.pa }}</th>
              <th>{{ careerBattingStat.ab }}</th>
              <th>{{ careerBattingStat.run }}</th>
              <th>{{ careerBattingStat.hit }}</th>
              <th>{{ careerBattingStat.double }}</th>
              <th>{{ careerBattingStat.triple }}</th>
              <th>{{ careerBattingStat.hr }}</th>
              <th>{{ careerBattingStat.rbi }}</th>
              <th>{{ careerBattingStat.sb }}</th>
              <th>{{ careerBattingStat.cs }}</th>
              <th>{{ careerBattingStat.bb }}</th>
              <th>{{ careerBattingStat.so }}</th>
              <th>{{ careerBattingStat.avg.toFixed(3) }}</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>
              <th>{{ calculateStrikeoutPercent(careerBattingStat) }}</th>
              <th>{{ careerBattingStat.bphr }}</th>
              <th>{{ careerBattingStat.bpfo }}</th>
              <th>{{ careerBattingStat.bp1b }}</th>
              <th>{{ careerBattingStat.bplo }}</th>
              <th>{{ careerBattingStat.gidp }}</th>
              <th>{{ careerBattingStat.hbp }}</th>
              <th>{{ careerBattingStat.sac }}</th>
              <th>{{ careerBattingStat.ibb }}</th>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>
</template>

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

interface BattingStatWithSeason extends BattingStat {
  seasonNumber: number
  isRegularSeason: boolean
}

export default {
  name: "PlayerCareerBattingTable",
  props: {
    regularSeasonBattingStats: { type: Array<BattingStat>, required: true },
    postSeasonBattingStats: { type: Array<BattingStat>, required: true }
  },
  computed: {
    hasBattingStats(): boolean {
      return !!(this.regularSeasonBattingStats.length + this.postSeasonBattingStats.length)
    },
    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
    },
    sortedRegularAndPostSeasonBatting(): BattingStatWithSeason[] {
      let seasonStats: BattingStatWithSeason[] = []

      if (this.regularSeasonBattingStats?.length) {
        seasonStats = seasonStats.concat(this.regularSeasonBattingStats.map(stat => {
          return {
            ...stat,
            seasonNumber: stat.player.season,
            isRegularSeason: true
          }
        }))
      }
      // TODO: here would be where you could filter out postseason stats if desired (like Josef requested)
      if (this.postSeasonBattingStats?.length) {
        seasonStats = seasonStats.concat(this.postSeasonBattingStats.map(stat => {
          return {
            ...stat,
            seasonNumber: stat.player.season,
            isRegularSeason: false
          }
        }))
      }

      return seasonStats.sort((s1, s2) => {
        return s1.seasonNumber - s2.seasonNumber === 0
          ? s1.isRegularSeason
            ? -1
            : 1
          : s1.seasonNumber - s2.seasonNumber
      })
    },
  },
  methods: {
    calculateStrikeoutPercent(stat: BattingStat): string {
      if (!stat.pa) return 'N/A'
      return (stat.so * 100 / stat.pa).toFixed(1)
    },
  }
}
</script>
