<template>
  <div class="card-images-display">
    <div class="row">
      <div class="col-sm-auto">
        <img style="max-height:485px; max-width: 100%;" id="team-image" :src="playerImageUrl" :alt="playerName">
        <p><a id="bbref-link" target="_blank" :href="baseballReferenceUrl">Baseball Reference Page</a></p>
      </div>
      <div class="col-sm-auto" v-visible="isAuthenticated" style="width: 940px;">
        <div class="row">
          <div v-visible="isAuthenticated" class="col-sm-5">
            <input :disabled="!hasPreviousCard" type="button" class="w-100" @click="decrementCurrentSeasonNumber"
              value="<<" />
          </div>
          <strong class="col-sm-2" style="text-align: center;">
            {{ getSeasonStringBySeasonNumber(currentSeasonNumber) }}
          </strong>
          <div v-visible="isAuthenticated" class="col-sm-5">
            <input :disabled="!hasNextCard" type="button" class="w-100" @click="incrementCurrentSeasonNumber"
              value=">>" />
          </div>
        </div>
        <div class="row">
          <div class="col-sm-auto">
            <img v-if="selectedCardImage1Url" style="width: 100%;" id="card-image" :src="selectedCardImage1Url">
          </div>
        </div>
        <div class="row">
          <div class="col-sm-auto">
            <img v-if="selectedCardImage2Url" style="width: 100%;" id="card-image-2" :src="selectedCardImage2Url">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import type { Player } from '@/services/playersService'
import { CURRENT_SEASON } from '@/services/utilities'

export default {
  name: 'CardImagesDisplay',
  data() {
    return {
      currentSeasonNumber: this.selectedSeasonNumber
    }
  },
  props: {
    isAuthenticated: { type: Boolean, default: false },
    selectedSeasonNumber: { type: Number, required: true },
    playerSeasons: { type: Array<Player>, default: [] },
    playerName: { type: String, required: true }
  },
  computed: {
    player(): Player | undefined {
      return this.playerSeasons.find(ps => ps.season === this.selectedSeasonNumber)
    },
    playerImageUrl(): string | undefined {
      return this.player?.vanity_card ?? this.player?.team.thumbnail
    },
    baseballReferenceUrl(): string | undefined {
      if (!this.player?.bbref_id)
        return undefined
      const firstChar = this.player.bbref_id.slice(0, 1)
      return `https://www.baseball-reference.com/players/${firstChar}/${this.player.bbref_id}.shtml`
    },
    cardImage1UrlBySeasonNumber(): Map<number, string> {
      return new Map(this.playerSeasons.map(ps => [ps.season, ps.image]))
    },
    cardImage2UrlBySeasonNumber(): Map<number, string> {
      return new Map(this.playerSeasons.map(ps => [ps.season, ps.image2]))
    },
    selectedCardImage1Url(): string | undefined {
      if (!this.isAuthenticated || !this.cardImage1UrlBySeasonNumber.has(this.currentSeasonNumber)) return undefined

      return this.cardImage1UrlBySeasonNumber.get(this.currentSeasonNumber)
    },
    selectedCardImage2Url(): string | undefined {
      if (!this.isAuthenticated || !this.cardImage2UrlBySeasonNumber.has(this.currentSeasonNumber)) return undefined

      return this.cardImage2UrlBySeasonNumber.get(this.currentSeasonNumber)
    },
    hasPreviousCard(): boolean {
      const currentImage = this.cardImage1UrlBySeasonNumber.get(this.currentSeasonNumber)
      let season = this.currentSeasonNumber
      while (season > 1) {
        if (season % 2 === 0) season--
        else season -= 2

        season = Math.max(season, 1)

        if (this.cardImage1UrlBySeasonNumber.has(season)
          && currentImage !== this.cardImage1UrlBySeasonNumber.get(season)) {
          return true
        }
      }
      return false
    },
    hasNextCard(): boolean {
      const currentImage = this.cardImage1UrlBySeasonNumber.get(this.currentSeasonNumber)
      let season = this.currentSeasonNumber
      while (season < CURRENT_SEASON) {
        if (season % 2 === 0) season++
        else season += 2

        season = Math.min(season, CURRENT_SEASON)

        if (this.cardImage1UrlBySeasonNumber.has(season)
          && currentImage !== this.cardImage1UrlBySeasonNumber.get(season)) {
          return true
        }
      }
      return false
    }
  },
  watch: {
    playerName(newName, oldName) {
      if (newName !== oldName) {
        this.currentSeasonNumber = this.selectedSeasonNumber
      }
    }
  },
  methods: {
    getSeasonStringBySeasonNumber(season: number): string {
      if (season === 1) return 'S1'

      // assumes seasons will continue to be paired like S2/3, S4/5, etc.
      const firstSeason = Math.trunc(season / 2) * 2
      return `S${firstSeason}/${firstSeason + 1}`
    },
    decrementCurrentSeasonNumber(): void {
      const currentImage = this.cardImage1UrlBySeasonNumber.get(this.currentSeasonNumber)
      while (this.currentSeasonNumber > 1) {
        if (this.currentSeasonNumber % 2 === 0) this.currentSeasonNumber--
        else this.currentSeasonNumber -= 2

        this.currentSeasonNumber = Math.max(this.currentSeasonNumber, 1)

        if (this.cardImage1UrlBySeasonNumber.has(this.currentSeasonNumber)
          && currentImage !== this.cardImage1UrlBySeasonNumber.get(this.currentSeasonNumber)) {
          break
        }
      }
    },
    incrementCurrentSeasonNumber(): void {
      const currentImage = this.cardImage1UrlBySeasonNumber.get(this.currentSeasonNumber)
      while (this.currentSeasonNumber <= CURRENT_SEASON) {
        if (this.currentSeasonNumber % 2 === 0) this.currentSeasonNumber++
        else this.currentSeasonNumber += 2

        this.currentSeasonNumber = Math.min(this.currentSeasonNumber, CURRENT_SEASON)

        if (this.cardImage1UrlBySeasonNumber.has(this.currentSeasonNumber)
          && currentImage !== this.cardImage1UrlBySeasonNumber.get(this.currentSeasonNumber)) {
          break
        }
      }
    }
  }
}

</script>