<template>
  <main class="home-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 class="row">
        <div class="col-md-6">
          <h2>SBa League</h2>
          <template v-if="standingsByDivision.length && standingsByDivision[0].length">
            <template v-for="division in standingsByDivision" :key="division[0].divisionName">
              <h3>{{ division[0].divisionName }}</h3>
              <StandingsTable :teams="division" :is-divisional=true />
            </template>
          </template>
          <template v-if="wildcardTeams.length">
            <h3>Wildcard</h3>
            <StandingsTable :teams="wildcardTeams" :is-divisional=false />
          </template>
        </div>

        <div class="col-md-6">
          <h3>Latest News</h3>
          <div id="news-posts">
            <div v-for="newsPost, index in newsPosts" :key="index">
              <NewsPreview :post="newsPost" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

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

export default {
  name: 'HomeView',
  components: {
    StandingsTable,
    NewsPreview
  },
  data() {
    return {
      seasonNumber: CURRENT_SEASON as number,
      weekNumber: undefined as number | undefined,
      teamStandings: [] as TeamStanding[],
      wildcardTeams: [] as TeamStanding[],
      standingsByDivision: [[]] as TeamStanding[][],
      newsPosts: [] as NewsPost[]
    }
  },
  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.sort((a, b) => a.divisionName < b.divisionName ? -1 : 1)
        .forEach(ts => {
          if (!teamStandingsByDivisionAbbreviation[ts.divisionAbbreviation]) {
            teamStandingsByDivisionAbbreviation[ts.divisionAbbreviation] = []
          }
          teamStandingsByDivisionAbbreviation[ts.divisionAbbreviation].push(ts)
        })

      this.standingsByDivision = Object.values(teamStandingsByDivisionAbbreviation)

      this.newsPosts = await getPosts()
    },

  }
}
</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>
