<template>
  <div class="row">
    <div class="col-sm-12">
      <div class="table-responsive-xl">
        <table class="table table-sm table-striped" id="table-pitching-stats">
          <thead class="thead-dark">
            <tr>
              <th @click="sortBy('teamName')" :class="getArrow('teamName')">Team</th>
              <th @click="sortBy('win')" :class="getArrow('win')">W</th>
              <th @click="sortBy('loss')" :class="getArrow('loss')">L</th>
              <th @click="sortBy('winPct')" :class="getArrow('winPct')">W-L%</th>
              <th @click="sortBy('era')" :class="getArrow('era')">ERA</th>
              <th @click="sortBy('games')" :class="getArrow('games')">G</th>
              <th @click="sortBy('gs')" :class="getArrow('gs')">GS</th>
              <th @click="sortBy('save')" :class="getArrow('save')">SV</th>
              <th @click="sortBy('hold')" :class="getArrow('hold')">HD</th>
              <th @click="sortBy('bsave')" :class="getArrow('bsave')">BSV</th>
              <th @click="sortBy('ip')" :class="getArrow('ip')">IP</th>
              <th @click="sortBy('hits')" :class="getArrow('hits')">H</th>
              <th @click="sortBy('run')" :class="getArrow('run')">R</th>
              <th @click="sortBy('e_run')" :class="getArrow('e_run')">ER</th>
              <th @click="sortBy('hr')" :class="getArrow('hr')">HR</th>
              <th @click="sortBy('bb')" :class="getArrow('bb')">BB</th>
              <th @click="sortBy('so')" :class="getArrow('so')">SO</th>
              <th @click="sortBy('hbp')" :class="getArrow('hbp')">HBP</th>
              <th @click="sortBy('balk')" :class="getArrow('balk')">BK</th>
              <th @click="sortBy('wp')" :class="getArrow('wp')">WP</th>
              <th @click="sortBy('ir')" :class="getArrow('ir')">IR</th>
              <th @click="sortBy('ir_sc')" :class="getArrow('ir_sc')">IRS</th>
              <th @click="sortBy('irsPct')" :class="getArrow('irsPct')">IRS%</th>
              <th @click="sortBy('whip')" :class="getArrow('whip')">WHIP</th>
              <th @click="sortBy('hPer9')" :class="getArrow('hPer9')">H/9</th>
              <th @click="sortBy('hrPer9')" :class="getArrow('hrPer9')">HR/9</th>
              <th @click="sortBy('bbPer9')" :class="getArrow('bbPer9')">BB/9</th>
              <th @click="sortBy('kPer9')" :class="getArrow('kPer9')">SO/9</th>
              <th @click="sortBy('kPerBB')" :class="getArrow('kPerBB')">SO/BB</th>
            </tr>
          </thead>
          <tbody v-if="pitchingStats.length">
            <tr v-for="stat in pitchingStats" :key="stat.player.name">
              <td>
                <RouterLink
                  :to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: stat.team.abbrev } }">
                  {{ stat.team.sname }}
                </RouterLink>
              </td>
              <td>{{ stat.win }}</td>
              <td>{{ stat.loss }}</td>
              <td>{{ winPercentage(stat) }}</td>
              <td>{{ stat.era.toFixed(2) }}</td>
              <td>{{ stat.games }}</td>
              <td>{{ stat.gs }}</td>
              <td>{{ stat.save }}</td>
              <td>{{ stat.hold }}</td>
              <td>{{ stat.bsave }}</td>
              <td>{{ outsToInnings(stat) }}</td>
              <td>{{ stat.hits }}</td>
              <td>{{ stat.run }}</td>
              <td>{{ stat.e_run }}</td>
              <td>{{ stat.hr }}</td>
              <td>{{ stat.bb }}</td>
              <td>{{ stat.so }}</td>
              <td>{{ stat.hbp }}</td>
              <td>{{ stat.balk }}</td>
              <td>{{ stat.wp }}</td>
              <td>{{ stat.ir }}</td>
              <td>{{ stat.ir_sc }}</td>
              <td>{{ formatIRSPercentage(stat) }}</td>
              <td>{{ stat.whip.toFixed(2) }}</td>
              <td>{{ hitsPer9(stat) }}</td>
              <td>{{ hrsPer9(stat) }}</td>
              <td>{{ stat.bbPer9.toFixed(1) }}</td>
              <td>{{ stat.kPer9.toFixed(1) }}</td>
              <td>{{ stat.kPerBB.toFixed(1) }}</td>
            </tr>
          </tbody>
          <tfoot v-if="pitchingStats.length">
            <tr v-if="totalPitchingStat">
              <th>Total</th>
              <th>{{ totalPitchingStat.win }}</th>
              <th>{{ totalPitchingStat.loss }}</th>
              <th>{{ winPercentage(totalPitchingStat) }}</th>
              <th>{{ totalPitchingStat.era.toFixed(2) }}</th>
              <th>{{ totalPitchingStat.games }}</th>
              <th>{{ totalPitchingStat.gs }}</th>
              <th>{{ totalPitchingStat.save }}</th>
              <th>{{ totalPitchingStat.hold }}</th>
              <th>{{ totalPitchingStat.bsave }}</th>
              <th>{{ outsToInnings(totalPitchingStat) }}</th>
              <th>{{ totalPitchingStat.hits }}</th>
              <th>{{ totalPitchingStat.run }}</th>
              <th>{{ totalPitchingStat.e_run }}</th>
              <th>{{ totalPitchingStat.hr }}</th>
              <th>{{ totalPitchingStat.bb }}</th>
              <th>{{ totalPitchingStat.so }}</th>
              <th>{{ totalPitchingStat.hbp }}</th>
              <th>{{ totalPitchingStat.balk }}</th>
              <th>{{ totalPitchingStat.wp }}</th>
              <th>{{ totalPitchingStat.ir }}</th>
              <th>{{ totalPitchingStat.ir_sc }}</th>
              <td>{{ formatIRSPercentage(totalPitchingStat) }}</td>
              <th>{{ totalPitchingStat.whip.toFixed(2) }}</th>
              <th>{{ hitsPer9(totalPitchingStat) }}</th>
              <th>{{ hrsPer9(totalPitchingStat) }}</th>
              <th>{{ totalPitchingStat.bbPer9.toFixed(1) }}</th>
              <th>{{ totalPitchingStat.kPer9.toFixed(1) }}</th>
              <th>{{ totalPitchingStat.kPerBB.toFixed(1) }}</th>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { aggregatePitchingStats, fetchTeamPitchingStatsBySeason, type PitchingStat } from '@/services/pitchingStatsService'
import { outsToInnings, winPercentage, hitsPer9, hrsPer9 } from '@/services/utilities'

interface ExtendedPitchingStat extends PitchingStat {
  teamName: string
  winPct: string
  irsPct: string
  hPer9: string
  hrPer9: string
}

export default {
  name: 'LeaderboardTeamPitchingTable',
  props: {
    seasonNumber: { type: Number, required: true }
  },
  data() {
    return {
      pitchingStats: [] as ExtendedPitchingStat[],
      sortKey: 'teamName' as keyof ExtendedPitchingStat,
      sortOrder: 1
    }
  },
  computed: {
    totalPitchingStat(): PitchingStat | undefined {
      if (this.pitchingStats.length > 0) {
        return aggregatePitchingStats(this.pitchingStats)
      }

      return undefined
    }
  },
  created() {
    this.fetchData()
  },
  watch: {
    seasonNumber(newValue, oldValue) {
      if (newValue !== oldValue) {
        this.pitchingStats = []
        this.sortKey = 'teamName'
        this.sortOrder = 1
        this.fetchData()
      }
    }
  },
  methods: {
    async fetchData(): Promise<void> {
      const unsortedPitchingStats: PitchingStat[] = await fetchTeamPitchingStatsBySeason(this.seasonNumber)
      this.pitchingStats = unsortedPitchingStats
        .map(s => (
          {...s, 
            teamName: s.team.sname,
            winPct: this.winPercentage(s),
            irsPct: this.formatIRSPercentage(s),
            hPer9: this.hitsPer9(s),
            hrPer9: this.hrsPer9(s)
          }))
        .sort((s1, s2) => s2.teamName < s1.teamName ? 1 : -1)
    },
    sortBy(stat: keyof ExtendedPitchingStat): void {
      this.setKey(stat)
      
      this.pitchingStats.sort((s1, s2) => s2[stat] < s1[stat] ? this.sortOrder : -1 * this.sortOrder)
    },
    setKey(stat: keyof ExtendedPitchingStat): void {
      if (this.sortKey === stat) {
        // if key currently selected, flip sort order
        this.sortOrder *= -1
      } else {
        this.sortKey = stat
        this.sortOrder = stat === 'teamName' ? 1 : -1
      }
    },
    getArrow(stat: keyof ExtendedPitchingStat): string {
      if (this.sortKey !== stat) return 'faux-arrow'
      
      return this.sortOrder > 0 ? 'up' : 'down'
    },
    outsToInnings(stat: PitchingStat): string {
      return outsToInnings(stat)
    },
    winPercentage(stat: PitchingStat): string {
      return winPercentage(stat)
    },
    hitsPer9(stat: PitchingStat): string {
      return hitsPer9(stat)
    },
    hrsPer9(stat: PitchingStat): string {
      return hrsPer9(stat)
    },
    formatIRSPercentage(stat: PitchingStat): string {
      if (stat.ir === 0) return '-'

      return `${(stat.ir_sc_pct * 100).toFixed(1)}%`
    }
  }
}
</script>

<style>
.up::after {
  content: "▵"
}
.down::after {
  content: "▿"
}
.faux-arrow::after {
  opacity: 0;
  content: "▿"
}
</style>
