<template>
  <div class="extended-standings-table table-responsive-xl">
    <table class="table table-sm table-striped">
      <template v-for="(division, index) in divisions" :key=index>
        <thead class="thead-dark">
          <tr>
            <th>{{ division.name }}</th>
            <th>Record</th>
            <th>Win %</th>
            <th>GB</th>
            <th>E#</th>
            <th>Home</th>
            <th>Away</th>
            <th>v Div 1</th>
            <th>v Div 2</th>
            <th>v Div 3</th>
            <th>v Div 4</th>
            <th>1 Run</th>
            <th>Pythag</th>
            <th>Run Diff</th>
            <th>Last 8</th>
            <th>Streak</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(team, index) in division.teamStandings" :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.homeRecord }}</td>
            <td>{{ team.awayRecord }}</td>
            <td>{{ team.division1Record }}</td>
            <td>{{ team.division2Record }}</td>
            <td>{{ team.division3Record }}</td>
            <td>{{ team.division4Record }}</td>
            <td>{{ team.oneRunRecord }}</td>
            <td>{{ team.pythagRecord }}</td>
            <td>{{ team.runDifferential }}</td>
            <td>{{ team.last8Record }}</td>
            <td>{{ team.streak }}</td>
          </tr>
        </tbody>
      </template>
    </table>
  </div>
</template>

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

interface DivisionStub {
  name: string
  teamStandings: TeamStanding[]
}

export default {
  name: 'ExtendedStandingsTable',
  props: {
    teamsByDivision: {
      type: Array<TeamStanding[]>,
      required: true,
    }
  },
  computed: {
    divisions(): DivisionStub[] {
      const namedDivisions: DivisionStub[] = []
      for (let i = 0; i < this.teamsByDivision.length; i++) {
        namedDivisions.push({ name: this.teamsByDivision[i][0].divisionName, teamStandings: this.teamsByDivision[i] })
      }

      return namedDivisions
    }

  },
  methods: {
    eliminationNumber(teamStanding: TeamStanding): string {
      return teamStanding.divisionEliminationNumber
    },
    gamesBack(teamStanding: TeamStanding): string {
      return teamStanding.divisionGamesBack
    },
    record(teamStanding: TeamStanding): string {
      return `${teamStanding.wins}-${teamStanding.losses}`
    },
    seasonNumber(): number {
      return CURRENT_SEASON
    }
  }
}
</script>
