<script setup lang="ts">
import type { MatchSessionDto } from '@/common/interfaces'
import type { GameService } from '@/services/GameService'
import type { LoggingService } from '@/services/LoggingService'
import ScoreboardTableComponent from '@/components/ScoreboardTableComponent.vue'
import { inject, onBeforeMount, ref, toRaw } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useGameStore } from '@/stores/game'

const route = useRoute()
const router = useRouter()
const gameStore = useGameStore()
const gameService: GameService = inject<GameService>('game') as GameService
const logger: LoggingService = inject<LoggingService>('logger') as LoggingService
const { updateSessionState } = gameStore
let sessionId: string
let matchSession = ref<MatchSessionDto | undefined>(undefined)

async function loadData() {
  matchSession.value = (await gameService.getMatchSession(sessionId)) as MatchSessionDto
  console.log('matchSession.value :>> ', toRaw(matchSession.value))
}

onBeforeMount(() => {
  sessionId = route.params.id as string
  console.log('sessionId :>> ', sessionId)
  loadData()
  if (sessionId) {
    // setInterval(loadData, 5000)
  } else {
    router.push({ name: 'home' })
  }
})

function gotoHome() {
  updateSessionState(undefined)
  router.push({ name: 'home' })
}
</script>

<template>
  <div class="container">
    <h1 class="title is-1">{{ $t('match-page') }}</h1>
    <h2 class="title is-3">{{ matchSession?.name }}</h2>

    <div class="level">
      <div class="level-item has-text-centered">
        <div>
          <p class="heading">{{ $t('winner') }}</p>
          <p class="title is-size-3">{{ matchSession?.matchWinner?.name }}</p>
        </div>
      </div>
      <div class="level-item has-text-centered">
        <div>
          <p class="heading">{{ $t('win-type') }}</p>
          <p class="title">{{ matchSession?.options.winType }}</p>
        </div>
      </div>
      <div class="level-item has-text-centered">
        <div>
          <p class="heading">{{ $t('points-to-win') }}</p>
          <p class="title">{{ matchSession?.options.winTarget }}</p>
        </div>
      </div>
    </div>
    <ScoreboardTableComponent
      :games="matchSession?.gameSummaries"
      :final-score="matchSession?.scoreboard"
      :winner="matchSession?.matchWinner"
    />
    <div class="buttons">
      <button class="button is-primary" @click="gotoHome">
        {{ $t('back') }}
      </button>
    </div>
    <div class="section">
      <!-- <div>{{ matchSession }}</div> -->
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
