<template>
  <main class="standings-view">
    <div class="centerDiv">
      <div class="row">
        <div class="col-sm-12">
          <h1>Season {{ seasonNumber }} Standings</h1>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <h2 id="week-num">{{ weekNumber ? `Week ${weekNumber}` : '' }}</h2>
        </div>
      </div>

      <!-- Division Standings -->
      <div v-if="standingsByDivision.length && standingsByDivision[0].length" class="row">
        <template v-for="division in standingsByDivision" :key="division[0].divisionName">
          <div class="col-md-6">
            <h3>{{ division[0].divisionName }}</h3>
            <StandingsTable :teams="division" :is-divisional=true />
          </div>
        </template>
      </div>
      <div v-if="wildcardTeams.length" class="row">
        <h3>Wildcard</h3>
        <StandingsTable :teams="wildcardTeams" :is-divisional=false />
      </div>

      <!-- Extended Standings -->
      <div class="row">
        <div class="col-sm-12">
          <h3>Extended Standings</h3>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <ExtendedStandingsTable :teamsByDivision="standingsByDivision" />
        </div>
      </div>
    </div>
  </main>
</template>

<script lang="ts">
import StandingsTable from '@/components/StandingsTable.vue'
import ExtendedStandingsTable from '@/components/ExtendedStandingsTable.vue'
import { fetchStandings, type TeamStanding } from '@/services/standingsService'
import { fetchCurrentLeagueInfo, type LeagueInfo } from '@/services/currentService'
import { CURRENT_SEASON } from '@/services/utilities'

export default {
  name: 'StandingsView',
  components: {
    StandingsTable,
    ExtendedStandingsTable
  },
  data() {
    return {
      seasonNumber: CURRENT_SEASON as number,
      weekNumber: undefined as number | undefined,
      teamStandings: [] as TeamStanding[],
      wildcardTeams: [] as TeamStanding[],
      standingsByDivision: [[]] as TeamStanding[][]
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData(): Promise<void> {
      const leagueInfo: LeagueInfo = await fetchCurrentLeagueInfo()
      this.weekNumber = leagueInfo.week

      this.teamStandings = await fetchStandings(CURRENT_SEASON)
      this.wildcardTeams = this.teamStandings.filter(ts => ts.isWildcardTeam)

      const teamStandingsByDivisionAbbreviation: { [key: string]: TeamStanding[] } = {}
      this.teamStandings.forEach(ts => {
        if (!teamStandingsByDivisionAbbreviation[ts.divisionAbbreviation]) {
          teamStandingsByDivisionAbbreviation[ts.divisionAbbreviation] = []
        }
        teamStandingsByDivisionAbbreviation[ts.divisionAbbreviation].push(ts)
      })

      this.standingsByDivision = Object.values(teamStandingsByDivisionAbbreviation)
    },

  }
}
</script>

<style>
.row {
  display: flex;
}

.column {
  flex-basis: 50%;
  /* Sets the initial width of each column to 50% */
  padding: 10px;
  box-sizing: border-box;
  /* Includes padding within the width of each column */
}
</style>
