<template>
  <div class="col-sm-8">
    <div class="table-responsive-xl" style="max-width:35rem">
      <table class="table table-sm table-striped">
        <thead class="thead-dark">
          <tr>
            <th>Summary</th>
            <th>W</th>
            <th>L</th>
            <th>SV</th>
            <th>ERA</th>
            <th>G</th>
            <th>GS</th>
            <th>IP</th>
            <th>SO</th>
            <th>WHIP</th>
          </tr>
        </thead>
        <tbody id="pitcher-summary-table">
          <tr v-if="currentSeasonPitching">
            <td>Season {{ currentSeasonPitching.player.season }}</td>
            <td>{{ currentSeasonPitching.win }}</td>
            <td>{{ currentSeasonPitching.loss }}</td>
            <td>{{ currentSeasonPitching.save }}</td>
            <td>{{ currentSeasonPitching.era.toFixed(2) }}</td>
            <td>{{ currentSeasonPitching.games }}</td>
            <td>{{ currentSeasonPitching.gs }}</td>
            <td>{{ outsToInnings(currentSeasonPitching) }}</td>
            <td>{{ currentSeasonPitching.so }}</td>
            <td>{{ currentSeasonPitching.whip.toFixed(2) }}</td>
          </tr>
          <tr v-if="currentPostSeasonPitching">
            <td>S{{ currentPostSeasonPitching.player.season }} / Playoffs</td>
            <td>{{ currentPostSeasonPitching.win }}</td>
            <td>{{ currentPostSeasonPitching.loss }}</td>
            <td>{{ currentPostSeasonPitching.save }}</td>
            <td>{{ currentPostSeasonPitching.era.toFixed(2) }}</td>
            <td>{{ currentPostSeasonPitching.games }}</td>
            <td>{{ currentPostSeasonPitching.gs }}</td>
            <td>{{ outsToInnings(currentPostSeasonPitching) }}</td>
            <td>{{ currentPostSeasonPitching.so }}</td>
            <td>{{ currentPostSeasonPitching.whip.toFixed(2) }}</td>
          </tr>
        </tbody>
        <tfoot id="pitcher-summary-footer">
          <tr v-if="careerPitchingStat">
            <th>Career</th>
            <td>{{ careerPitchingStat.win }}</td>
            <td>{{ careerPitchingStat.loss }}</td>
            <td>{{ careerPitchingStat.save }}</td>
            <td>{{ careerPitchingStat.era.toFixed(2) }}</td>
            <td>{{ careerPitchingStat.games }}</td>
            <td>{{ careerPitchingStat.gs }}</td>
            <td>{{ outsToInnings(careerPitchingStat) }}</td>
            <td>{{ careerPitchingStat.so }}</td>
            <td>{{ careerPitchingStat.whip.toFixed(2) }}</td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</template>

<script lang="ts">
import { aggregatePitchingStats, type PitchingStat } from '@/services/pitchingStatsService'
import { outsToInnings } from '@/services/utilities'
import type { PropType } from 'vue'

export default {
  name: "PlayerPitchingSummaryTable",
  props: {
    currentSeasonPitching: { type: Object as PropType<PitchingStat>, required: false },
    currentPostSeasonPitching: { type: Object as PropType<PitchingStat>, required: false },
    regularSeasonPitchingStats: { type: Array<PitchingStat>, required: true }
  },
  computed: {
    careerPitchingStat(): PitchingStat | undefined {
      if (this.regularSeasonPitchingStats.length > 0) {
        // old site behavior just summed regular season stats for the career line total
        return aggregatePitchingStats(this.regularSeasonPitchingStats)
      }

      return undefined
    },
  },
  methods: {
    outsToInnings(stat: PitchingStat): string {
      return outsToInnings(stat)
    }
  }
}
</script>
