<template>
  <div class="col-sm-12">
    <h3>Last 4 Games</h3>
    <div class="table-responsive-xl">
      <table class="table table-sm table-striped">
        <thead class="thead-dark">
          <tr>
            <th>Game</th>
            <th>W</th>
            <th>L</th>
            <th>ERA</th>
            <th>GS</th>
            <th>SV</th>
            <th>HD</th>
            <th>IP</th>
            <th>H</th>
            <th>R</th>
            <th>ER</th>
            <th>HR</th>
            <th>BB</th>
            <th>SO</th>
            <th>HBP</th>
            <th>BK</th>
            <th>WP</th>
          </tr>
        </thead>
        <tbody id="last4-pitching">
          <!-- eslint-disable-next-line vue/require-v-for-key -->
          <tr v-for="gameStat in last4GamesPitching">
            <td>{{ makeWxGyFromGame(gameStat.game) }}</td>
            <td>{{ gameStat.win }}</td>
            <td>{{ gameStat.loss }}</td>
            <td>{{ gameStat.era.toFixed(2) }}</td>
            <td>{{ gameStat.gs }}</td>
            <td>{{ gameStat.save }}</td>
            <td>{{ gameStat.hold }}</td>
            <td>{{ outsToInnings(gameStat) }}</td>
            <td>{{ gameStat.hits }}</td>
            <td>{{ gameStat.run }}</td>
            <td>{{ gameStat.e_run }}</td>
            <td>{{ gameStat.hr }}</td>
            <td>{{ gameStat.bb }}</td>
            <td>{{ gameStat.so }}</td>
            <td>{{ gameStat.hbp }}</td>
            <td>{{ gameStat.balk }}</td>
            <td>{{ gameStat.wp }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script lang="ts">
import type { Game } from '@/services/apiResponseTypes'
import type { PitchingStat } from '@/services/pitchingStatsService'
import { outsToInnings } from '@/services/utilities'

export default {
  name: 'LastFourGamesPitchingTable',
  props: {
    last4GamesPitching: { type: Array<PitchingStat>, required: true }
  },
  methods: {
    makeWxGyFromGame(game: Game | 'TOT'): string {
      if (game === 'TOT') return 'TOT'
      return `w${game.week}g${game.game_num}`
    },
    outsToInnings(stat: PitchingStat): string {
      return outsToInnings(stat)
    }
  }
}
</script>
