<template>
  <div class="transactions-view centerDiv">
    <!-- Transaction Header -->
    <div class="row">
      <div class="col-sm-12">
        <h1>Season {{seasonNumber}} Transactions</h1>
      </div>
    </div>
    <!-- Week Buttons -->
    <div class="row">
      <div class="col-sm">
        <button v-if="selectedWeekNumber > 1" class="btn btn-outline-primary m-1"
          @click="$router.push({ name: 'transactions', params: { seasonNumber: seasonNumber, weekNumber: selectedWeekNumber - 1 } })">
          &lt;&lt; Week {{ selectedWeekNumber - 1 }}
        </button>
        <button class="btn btn-primary m-1">
          Week {{ selectedWeekNumber }}
        </button>
        <!-- TODO might want to do regular season week + post season week amount here -->
        <button v-if="selectedWeekNumber < 21" class="btn btn-outline-primary m-1"
          @click="$router.push({ name: 'transactions', params: { seasonNumber: seasonNumber, weekNumber: selectedWeekNumber + 1 } })">
          Week {{ selectedWeekNumber + 1 }} &gt;&gt;
        </button>
      </div>
    </div>
    <!-- Transaction tables for selected week and the next -->
    <div class="row">
      <div class="col-sm-6">
        <h3 id="week1-heading">Week {{ selectedWeekNumber }}</h3>
        <div class="table-responsive-xl">
          <table class="table table-sm table-striped" id="week1">
            <thead class="thead-dark">
              <tr>
                <th>Week</th>
                <th>Player</th>
                <th>Old Team</th>
                <th>New Team</th>
              </tr>
            </thead>
            <tbody id="curr-week-table">
              <tr v-for="transaction in weekTransactions" :key="transaction.id">
                <td>{{ selectedWeekNumber }}</td>
                <td>
                  <RouterLink :to="{ name: 'player', params: { seasonNumber: seasonNumber, playerName: transaction.player.name } }">
                    {{ transaction.player.name }}
                  </RouterLink>
                </td>
                <td>
                  <RouterLink :to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: transaction.oldteam.abbrev } }">
                    {{ transaction.oldteam.sname }}
                  </RouterLink>
                </td>
                <td>
                  <RouterLink :to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: transaction.newteam.abbrev } }">
                    {{ transaction.newteam.sname }}
                  </RouterLink>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div v-if="selectedWeekNumber < 21" class="col-sm-6">
        <h3 id="week2-heading">Week {{ selectedWeekNumber + 1 }}</h3>
        <div class="table-responsive-xl">
          <table class="table table-sm table-striped" id="week2">
            <thead class="thead-dark">
              <tr>
                <th>Week</th>
                <th>Player</th>
                <th>Old Team</th>
                <th>New Team</th>
              </tr>
            </thead>
            <tbody id="next-week-table">
              <tr v-for="transaction in nextWeekTransactions" :key="transaction.id">
                <td>{{ selectedWeekNumber + 1 }}</td>
                <td>
                  <RouterLink :to="{ name: 'player', params: { seasonNumber: seasonNumber, playerName: transaction.player.name } }">
                    {{ transaction.player.name }}
                  </RouterLink>
                </td>
                <td>
                  <RouterLink :to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: transaction.oldteam.abbrev } }">
                    {{ transaction.oldteam.sname }}
                  </RouterLink>
                </td>
                <td>
                  <RouterLink :to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: transaction.newteam.abbrev } }">
                    {{ transaction.newteam.sname }}
                  </RouterLink>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { type LeagueInfo, fetchCurrentLeagueInfo } from '@/services/currentService'
import { fetchTransactionsByWeek, type Transaction } from '@/services/transactionsService'
import { CURRENT_SEASON } from '@/services/utilities'

export default {
  name: 'TransactionsView',
  data() {
    return {
      currentWeekNumber: 0,
      weekTransactions: [] as Transaction[],
      nextWeekTransactions: [] as Transaction[]
    }
  },
  props: {
    seasonNumber: { type: Number, default: CURRENT_SEASON },
    weekNumber: { type: Number, required: false }
  },
  created() {
    this.fetchCurrentWeekNumber()
    this.fetchData()
  },
  computed: {
    selectedWeekNumber(): number {
      if (this.weekNumber || this.weekNumber === 0) return this.weekNumber
      return this.currentWeekNumber
    }
  },
  watch: {
    seasonNumber(newValue, oldValue) {
      if (newValue !== oldValue){ 
        this.weekTransactions = []
        this.nextWeekTransactions = []
        this.fetchData()
      }
    },
    selectedWeekNumber(newValue, oldValue) {
      if (newValue !== oldValue) { 
        this.weekTransactions = []
        this.nextWeekTransactions = []
        this.fetchData()
      }
    }
  },
  methods: {
    async fetchCurrentWeekNumber(): Promise<void> {
      const leagueInfo: LeagueInfo = await fetchCurrentLeagueInfo()
      this.currentWeekNumber = leagueInfo.week
    },
    async fetchData(): Promise<void> {
      this.weekTransactions = await fetchTransactionsByWeek(this.seasonNumber, this.selectedWeekNumber)
      console.log('curr', this.weekTransactions)
      this.nextWeekTransactions = await fetchTransactionsByWeek(this.seasonNumber, this.selectedWeekNumber + 1)
      console.log('next', this.nextWeekTransactions)
    }
  }
}
</script>
