<template>
  <div v-if="schedule.length" class="team-schedule-table">
    <div class="row">
      <div class="col-sm-12">
        <h3>Season Schedule</h3>
      </div>

      <!-- First Half -->
      <div class="col-sm-6">
        <div class="table-responsive-xl">
          <table class="table table-sm table-striped" id="schedule-first">
            <thead class="thead-dark">
              <tr id="schedule-first-header">
                <th style="width: 4rem">Week</th>
                <th style="width: 8rem">Away</th>
                <th style="width: 2rem"></th>
                <th style="width: 8rem">Home</th>
                <th style="width: 8rem">Game 1</th>
                <th style="width: 8rem">Game 2</th>
                <th style="width: 8rem">Game 3</th>
                <th style="width: 8rem">Game 4</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="row in firstHalfRows">
                <td>{{ row.week }}</td>
                <td>
                  <RouterLink
                    :to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: row.awayTeam.abbrev } }">
                    {{ row.awayTeam.sname }}
                  </RouterLink>
                </td>
                <td>@</td>
                <td>
                  <RouterLink
                    :to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: row.homeTeam.abbrev } }">
                    {{ row.homeTeam.sname }}
                  </RouterLink>
                </td>
                <td>{{ makeGameScore(row.game1) }}</td>
                <td>{{ makeGameScore(row.game2) }}</td>
                <td>{{ makeGameScore(row.game3) }}</td>
                <td>{{ makeGameScore(row.game4) }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- Second Half -->
      <div class="col-sm-6">
        <div class="table-responsive-xl">
          <table class="table table-sm table-striped" id="schedule-second">
            <thead class="thead-dark">
              <tr id="schedule-second-header">
                <th style="width: 4rem">Week</th>
                <th style="width: 8rem">Away</th>
                <th style="width: 2rem"></th>
                <th style="width: 8rem">Home</th>
                <th style="width: 8rem">Game 1</th>
                <th style="width: 8rem">Game 2</th>
                <th style="width: 8rem">Game 3</th>
                <th style="width: 8rem">Game 4</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="row in secondHalfRows">
                <td>{{ row.week }}</td>
                <td>
                  <RouterLink
                    :to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: row.awayTeam.abbrev } }">
                    {{ row.awayTeam.sname }}
                  </RouterLink>
                </td>
                <td>@</td>
                <td>
                  <RouterLink
                    :to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: row.homeTeam.abbrev } }">
                    {{ row.homeTeam.sname }}
                  </RouterLink>
                </td>
                <td>{{ makeGameScore(row.game1) }}</td>
                <td>{{ makeGameScore(row.game2) }}</td>
                <td>{{ makeGameScore(row.game3) }}</td>
                <td>{{ makeGameScore(row.game4) }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

    </div>
  </div>
</template>

<script lang="ts">
import type { Game, Team } from '@/services/apiResponseTypes'
import { fetchGamesBySeasonAndTeamId } from '@/services/gameService'
import { GAMES_PER_SEASON } from '@/services/utilities'

interface ScheduleRow {
  week: number
  awayTeam: Team
  homeTeam: Team
  game1: Game | undefined
  game2: Game | undefined
  game3: Game | undefined
  game4: Game | undefined
}

export default {
  name: "TeamScheduleTable",
  data() {
    return {
      schedule: [] as Game[]
    }
  },
  props: {
    seasonNumber: { type: Number, required: true },
    teamId: { type: Number, required: true }
  },
  computed: {
    midSeasonWeekNumber(): number {
      const gamesPerWeek = 4
      return (GAMES_PER_SEASON / gamesPerWeek) / 2
    },
    firstHalfRows(): ScheduleRow[] {
      const games = this.schedule.filter(g => g.week <= this.midSeasonWeekNumber)
      return this.makeScheduleRowsFromGames(games)
    },
    secondHalfRows(): ScheduleRow[] {
      const games = this.schedule.filter(g => g.week > this.midSeasonWeekNumber)
      return this.makeScheduleRowsFromGames(games)
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    makeScheduleRowsFromGames(games: Game[]): ScheduleRow[] {
      const gamesByWeekAndHomeTeam = this.groupByWeekAndHomeTeam(games)
      console.log(Object.values(gamesByWeekAndHomeTeam))
      return Object.values(gamesByWeekAndHomeTeam).sort((games1, games2) => games1[0].id - games2[0].id).map(games => {
        return {
          week: games[0].week,
          awayTeam: games[0].away_team,
          homeTeam: games[0].home_team,
          game1: games.find(g => g.game_num === 1),
          game2: games.find(g => g.game_num === 2),
          game3: games.find(g => g.game_num === 3),
          game4: games.find(g => g.game_num === 4)
        }
      })
    },
    groupByWeekAndHomeTeam(games: Game[]): { [key: string]: Game[] } {
      return games.reduce((storage, game) => {
        const key = `${game.week}-${game.home_team.abbrev}`
        if (storage[key]) {
          storage[key].push(game)
        } else {
          storage[key] = [game]
        }
        return storage
      }, {} as { [key: string]: Game[] })
    },
    makeGameScore(game: Game | undefined): string {
      if (!game || (!game.away_score && !game.home_score)) return '-'
      return `${game.away_team.abbrev} ${game.away_score}-${game.home_score} ${game.home_team.abbrev}`
    },
    async fetchData(): Promise<void> {
      this.schedule = await fetchGamesBySeasonAndTeamId(this.seasonNumber, this.teamId)
    }
  }
}
</script>