<template>
  <div class="col-small-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>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>BPHR</th>
            <th>BPFO</th>
            <th>BP1B</th>
            <th>BPLO</th>
            <th>GIDP</th>
            <th>HBP</th>
            <th>SAC</th>
            <th>IBB</th>
            <th>XCh</th>
            <th>XH</th>
            <th>E</th>
            <th>PB</th>
            <th>SBa</th>
            <th>CSc</th>
          </tr>
        </thead>
        <tbody id="last4-batting">
          <!-- eslint-disable-next-line vue/require-v-for-key -->
          <tr v-for="gameStat in last4GamesBatting">
            <td>{{ makeWxGyFromGame(gameStat.game) }}</td>
            <td>{{ gameStat.pa }}</td>
            <td>{{ gameStat.ab }}</td>
            <td>{{ gameStat.run }}</td>
            <td>{{ gameStat.hit }}</td>
            <td>{{ gameStat.double }}</td>
            <td>{{ gameStat.triple }}</td>
            <td>{{ gameStat.hr }}</td>
            <td>{{ gameStat.rbi }}</td>
            <td>{{ gameStat.sb }}</td>
            <td>{{ gameStat.cs }}</td>
            <td>{{ gameStat.bb }}</td>
            <td>{{ gameStat.so }}</td>
            <td>{{ gameStat.bphr }}</td>
            <td>{{ gameStat.bpfo }}</td>
            <td>{{ gameStat.bp1b }}</td>
            <td>{{ gameStat.bplo }}</td>
            <td>{{ gameStat.gidp }}</td>
            <td>{{ gameStat.hbp }}</td>
            <td>{{ gameStat.sac }}</td>
            <td>{{ gameStat.ibb }}</td>
            <td>{{ fieldingStatForGame(gameStat).xch }}</td>
            <td>{{ fieldingStatForGame(gameStat).xhit }}</td>
            <td>{{ fieldingStatForGame(gameStat).error }}</td>
            <td>{{ fieldingStatForGame(gameStat).pb }}</td>
            <td>{{ fieldingStatForGame(gameStat).sba }}</td>
            <td>{{ fieldingStatForGame(gameStat).cs }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script lang="ts">
import type { Game } from '@/services/apiResponseTypes'
import type { BattingStat } from '@/services/battingStatsService'
import type { FieldingStat } from '@/services/fieldingStatsService'

interface MinimalAggregateFieldingStat {
  xch: number,
  xhit: number,
  error: number,
  pb: number,
  sba: number,
  cs: number
}

export default {
  name: 'LastFourGamesBattingTable',
  props: {
    last4GamesBatting: { type: Array<BattingStat>, required: true },
    last4GamesFielding: { type: Array<FieldingStat>, required: true }
  },
  methods: {
    makeWxGyFromGame(game: Game | 'TOT'): string {
      if (game === 'TOT') return 'TOT'
      return `w${game.week}g${game.game_num}`
    },
    fieldingStatForGame(battingStat: BattingStat): MinimalAggregateFieldingStat {
      const fieldingStat: MinimalAggregateFieldingStat = {
        xch: 0,
        xhit: 0,
        error: 0,
        pb: 0,
        sba: 0,
        cs: 0
      }

      this.last4GamesFielding.forEach(stat => {
        if (stat.game === 'TOT' || battingStat.game === 'TOT') return
        if (stat.game.id !== battingStat.game.id) return

        fieldingStat.xch += stat.xCheckCount
        fieldingStat.xhit += stat.hit
        fieldingStat.error += stat.error
        fieldingStat.pb += stat.passedBallCount
        fieldingStat.sba += stat.stolenBaseCheckCount
        fieldingStat.cs += stat.caughtStealingCount
      })

      return fieldingStat
    }
  }
}
</script>
