<script setup lang="ts">
import type { GameDto, MatchSessionOptions, PlayerDto } from '@/common/interfaces'
import { onMounted, onUnmounted, ref, inject } from 'vue'
import { Game } from '@/game/Game'
import { useGameStore } from '@/stores/game'
import { useEventBusStore } from '@/stores/eventBus'
import { storeToRefs } from 'pinia'
import { useGameOptionsStore } from '@/stores/gameOptions'
import { useRoute, useRouter } from 'vue-router'

let sessionId: string
const socketService: any = inject('socket')

const gameStore = useGameStore()
const gameOptionsStore = useGameOptionsStore()
const eventBus = useEventBusStore()
const router = useRouter()
const route = useRoute()
const { playerState, sessionState } = storeToRefs(gameStore)
const { updateGameState } = gameStore
const { gameOptions } = storeToRefs(gameOptionsStore)

const minScreenWidth = 1280
const minScreenHeight = 720

let screenWidth = window.innerWidth - 10
let screenHeight = window.innerHeight - 10

if (screenWidth < minScreenWidth) screenWidth = minScreenWidth
if (screenHeight < minScreenHeight) screenHeight = minScreenHeight

const minSide = Math.min(screenWidth, screenHeight)

const boardScale = minSide > 1440 ? 1 : minSide > 1080 ? 0.8 : minSide > 720 ? 0.7 : 0.5

let appEl = ref<HTMLElement | null>(null)

const defaultOptions: MatchSessionOptions = {
  background: gameOptions.value?.background || 'green',
  teamed: false,
  winType: 'points',
  winTarget: 100,
  seed: '',
  sessionName: `Test #${Date.now()}`,
  numPlayers: 1,
  turnWaitSeconds: 30,
}
const gameOptionsValue: MatchSessionOptions = {
  ...defaultOptions,
  ...sessionState.value?.options,
  ...{ screen: { width: screenWidth, height: screenHeight, boardScale: boardScale, handScale: 1 } },
}

const game = new Game(
  gameOptionsValue,
  socketService,
  playerState.value?.id || '',
  sessionState.value?.id || '',
)

onMounted(async () => {
  sessionId = route.params.id as string
  if (appEl.value === null) return
  const canvas = await game.setup()
  appEl.value.appendChild(canvas)
  await game.preload()
  await game.start(sessionState?.value?.players)

  game.on('game:finish-click', () => {
    game.destroy()
    router.push({ name: 'match', params: { id: sessionId } })
  })

  eventBus.subscribe('server:game-finished', (data) => {
    game.gameFinished(data)
  })

  eventBus.subscribe('server:server-player-move', (data) => {
    game.serverPlayerMove(data, playerState.value?.id ?? '')
  })

  eventBus.subscribe('game:player-turn-started', (data: any) => {
    // game.setCanMakeMove(true)
  })

  eventBus.subscribe('server:hand-dealt', (data: { player: PlayerDto; gameState: GameDto }) => {
    game.hand.update(data.player)
    game.updateOtherHands(data.gameState.players)
  })

  eventBus.subscribe('server:next-turn', (gameState: GameDto) => {
    updateGameState(gameState)
    game.setNextPlayer(gameState)
  })

  eventBus.subscribe('server:match-finished', (data) => {
    game.matchFinished(data)
  })
})

onUnmounted(() => {
  //game.destroy()
})
</script>

<template>
  <div ref="appEl" class="game-app"></div>
</template>

<style scoped>
.game-app {
  position: relative;
  z-index: 10;
}
</style>
