<template>
  <div class="team-leaderboard-view centerDiv">
    <div class="row">
      <div class="col-sm-12">
        <h1 id="season-heading">Season {{ seasonNumber }} Team Stats</h1>
        <h2 id="stat-heading">{{ statType }} Stats</h2>
      </div>
    </div>
    <div class="row" style="padding-bottom: 2ch">
      <div class="col-sm-12">
        <select name="seasonNumber" id="seasonNumber" v-model="seasonNumber">
          <option v-for="season in seasonNumbers" :key="season" :value="season">Season {{ season }}</option>
        </select>
        <select name="statType" id="statType" v-model="statType">
          <option key="Batting" value="Batting">Batting</option>
          <option key="Pitching" value="Pitching">Pitching</option>
          <option key="Fielding" value="Fielding">Fielding</option>
        </select>
      </div>
    </div>
    <LeaderboardTeamBattingTable v-if="statType == 'Batting'" :season-number="seasonNumber" />
    <LeaderboardTeamPitchingTable v-if="statType == 'Pitching'" :season-number="seasonNumber" />
    <LeaderboardTeamFieldingTable v-if="statType == 'Fielding'" :season-number="seasonNumber" />
  </div>
</template>

<script lang="ts">
import LeaderboardTeamBattingTable from '@/components/LeaderboardTeamBattingTable.vue'
import LeaderboardTeamFieldingTable from '@/components/LeaderboardTeamFieldingTable.vue'
import LeaderboardTeamPitchingTable from '@/components/LeaderboardTeamPitchingTable.vue'
import { CURRENT_SEASON, MODERN_STAT_ERA_START } from '@/services/utilities'

export default {
  name: 'TeamLeaderboardView',
  components: {
    LeaderboardTeamBattingTable,
    LeaderboardTeamFieldingTable,
    LeaderboardTeamPitchingTable,
  },
  data() {
    return {
      currentSeasonNumber: CURRENT_SEASON,
      seasonNumber: CURRENT_SEASON,
      statType: 'Batting' as 'Batting' | 'Pitching' | 'Fielding',
    }
  },
  computed: {
    seasonNumbers(): number[] {
      if (!this.currentSeasonNumber) return []
      return Array.from({ length: this.currentSeasonNumber - MODERN_STAT_ERA_START + 1 }, (_, i) => i + MODERN_STAT_ERA_START)
    },
  }
}
</script>
