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

const route = useRoute()
const router = useRouter()
const gameStore = useGameStore()
const eventBus = useEventBusStore()
const socketService: any = inject('socket')
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)

const { readyForStart, sessionState, isSessionStarted, playerState, amIHost } =
  storeToRefs(gameStore)
const { updateSessionState, updatePlayerState, updateGameState } = gameStore

async function setPlayerReady() {
  logger.debug('Starting game')
  if (!sessionState.value) {
    logger.error('No session found')
    return
  }
  if (!playerState.value) {
    logger.error('No player found')
    return
  }
  await socketService.sendMessage('client:set-player-ready', {
    userId: playerState.value.id,
    sessionId: sessionState.value.id
  })
}

async function startMatch() {
  const sessionId = sessionState?.value?.id
  const playerId = playerState?.value?.id
  if (sessionId) {
    await socketService.sendMessageWithAck('client:start-session', {
      sessionId: sessionId,
      playerId: playerId
    })
  }
}

async function cancelMatch() {
  logger.debug('Cancelling match')
  await gameService.cancelMatchSession(sessionId)
  updateSessionState(undefined)
  updatePlayerState(undefined)
  updateGameState(undefined)

  logger.debug('Match cancelled successfully')
  router.push({ name: 'home' })
}

async function loadData() {
  await gameService.getMatchSession(sessionId)
}

eventBus.subscribe('window-before-unload', async () => {
  logger.debug('Window before unload')
  await cancelMatch()
})

eventBus.subscribe('server:match-starting', () => {
  logger.debug('Match starting')
  router.push({ name: 'game' })
})

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

<template>
  <div>
    <h1 class="title is-2">Match Page</h1>
    <div class="block" v-if="matchSession">
      <p>Session ID: {{ matchSession._id }}</p>
      <p>Session Name: {{ matchSession.name }}</p>
      <p>Session started: {{ isSessionStarted }}</p>
      <p>Host: {{ amIHost }}</p>
      <p>{{ sessionState || 'No session' }}</p>
    </div>
    <div class="block">
      <p v-if="!amIHost && !readyForStart">Waiting for host to start session</p>
      <button class="button" @click="setPlayerReady" v-if="isSessionStarted">
        <span v-if="!readyForStart">Ready</span><span v-else>Unready</span>
      </button>
      <button class="button" @click="startMatch" v-if="amIHost && readyForStart">
        <span>Start</span>
      </button>

      <button class="button" @click="cancelMatch" v-if="isSessionStarted">
        <span>Cancel</span>
      </button>
    </div>
  </div>
</template>

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