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

const route = useRoute()
const router = useRouter()
const gameService: GameService = inject<GameService>('game') as GameService
const logger: LoggingService = inject<LoggingService>('logger') as LoggingService

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' })
  }
})
</script>

<template>
  <div class="container">
    <h1 class="title is-1">{{ $t('match-page') }}</h1>
    <h2 class="title is-3">{{ matchSession?.name }}</h2>
    <div class="block mt-6">
      <p class="mb-4">
        <span class="title is-5">{{ $t('winner') }}</span>
        <span class="is-size-5 ml-4">{{ matchSession?.matchWinner?.name }}</span>
      </p>
      <p class="mb-4">
        <span class="title is-5">{{ $t('win-type') }}</span>
        <span class="is-size-5 ml-4">{{ matchSession?.options.winType }}</span>
      </p>
      <p class="mb-4">
        <span class="title is-5">{{ $t('points-to-win') }}</span>
        <span class="is-size-5 ml-4">{{ matchSession?.options.winTarget }}</span>
      </p>
      <h3 class="title is-5">{{ $t('final-scoreboard') }}</h3>
      <div v-bind:key="$index" v-for="(score, $index) in matchSession?.scoreboard">
        <p class="">
          <span class="title is-5">{{ score.name }}</span>
          <span class="is-size-5 ml-4">{{ score.score }}</span>
        </p>
      </div>
    </div>
    <div class="grid">
      <div
        class="cell"
        v-bind:key="$index"
        v-for="(summary, $index) in matchSession?.gameSummaries"
      >
        <div class="block mt-6">
          <h3 class="title is-5">{{ $t('round-index-1', [$index + 1]) }}</h3>
          <p class="mb-4">
            <span class="title is-5">{{ $t('winner') }}</span>
            <span class="is-size-5 ml-4">{{ summary.winner?.name }}</span>
          </p>
          <h4 class="title is-6">{{ $t('scoreboard') }}</h4>
          <div v-bind:key="$index" v-for="(gameScore, $index) in summary.score">
            <p class="">
              <span class="title is-5">{{ gameScore.name }}</span>
              <span class="is-size-5 ml-4">{{ gameScore.score }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="buttons">
      <button class="button is-primary" @click="router.push({ name: 'home' })">
        {{ $t('back') }}
      </button>
    </div>
    <div class="section">
      <!-- <div>{{ matchSession }}</div> -->
    </div>
  </div>
</template>

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