<template>
  <div class="standings-table table-responsive-xl">
    <table class="table table-sm table-striped">
      <thead class="thead-dark">
        <tr>
          <th>Team</th>
          <th>Record</th>
          <th>Win %</th>
          <th>GB</th>
          <th>E#</th>
          <th>Run Diff</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(team, index) in teams" :key="index">
          <td>
            <RouterLink
              :to="{ name: 'team', params: { seasonNumber: seasonNumber(), teamAbbreviation: team.teamAbbreviation } }">
              {{
                team.teamName }}
            </RouterLink>
          </td>
          <td>{{ record(team) }}</td>
          <td>{{ team.winPercentage }}</td>
          <td>{{ gamesBack(team) }}</td>
          <td>{{ eliminationNumber(team) }}</td>
          <td>{{ team.runDifferential }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts">
import type { TeamStanding } from '@/services/standingsService'
import { CURRENT_SEASON } from '@/services/utilities'


export default {
  name: "StandingsTable",
  props: {
    teams: {
      type: Array<TeamStanding>,
      required: true,
    },
    isDivisional: {
      type: Boolean,
      required: true
    }
  },
  methods: {
    eliminationNumber(teamStanding: TeamStanding): string {
      return this.isDivisional ? teamStanding.divisionEliminationNumber : teamStanding.wildcardEliminationNumber
    },
    gamesBack(teamStanding: TeamStanding): string {
      return this.isDivisional ? teamStanding.divisionGamesBack : teamStanding.wildcardGamesBack
    },
    record(teamStanding: TeamStanding): string {
      return `${teamStanding.wins}-${teamStanding.losses}`
    },
    seasonNumber(): number {
      return CURRENT_SEASON
    }
  }
}
</script>
