<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>
          <h3>International wOBA Grand Prix</h3>
          <StandingsTable :teams="iwgpTeams" :is-divisional=true />
          <h3>Crabbers</h3>
          <StandingsTable :teams="balTeams" :is-divisional=true />
          <h3>Fun Diff</h3>
          <StandingsTable :teams="fdTeams" :is-divisional=true />
          <h3>NL West</h3>
          <StandingsTable :teams="nlwTeams" :is-divisional=true />
          <h3>Wildcard</h3>
          <StandingsTable :teams="wildcardTeams" :is-divisional=false />
        </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[],
      iwgpTeams: [] as TeamStanding[],
      nlwTeams: [] as TeamStanding[],
      wildcardTeams: [] as TeamStanding[],
      balTeams: [] as TeamStanding[],
      fdTeams: [] 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)
      // TODO this could be made more robust to division/league structure changes by identifying the unique
      // league/div abbreviations, then grouping on each into an array of arrays, then in the template above
      // v-for over the structure to generate a dynamic standings page
      this.iwgpTeams = this.teamStandings.filter(ts => ts.divisionAbbreviation === 'IWGP')
      this.nlwTeams = this.teamStandings.filter(ts => ts.divisionAbbreviation === 'NLW')
      this.balTeams = this.teamStandings.filter(ts => ts.divisionAbbreviation === 'BAL')
      this.fdTeams = this.teamStandings.filter(ts => ts.divisionAbbreviation === 'FD')
      this.wildcardTeams = this.teamStandings.filter(ts => ts.isWildcardTeam)

      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>
