<script setup lang="ts">
import type { GameDto, 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 = 800
const minScreenHeight = 700

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

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

const boardScale = screenWidth > 1200 ? 0.8 : screenWidth > 1200 ? 0.7 : 0.6

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

const game = new Game(
  {
    width: screenWidth,
    height: screenHeight,
    boardScale,
    handScale: 1,
    background: gameOptions.value?.background || 'green',
  },
  socketService,
  playerState.value?.id || '',
  sessionState.value?.id || '',
)

// watch(
//   () => gameStore.gameState,
//   async (value: GameDto | undefined) => {
//     if (value === undefined) return
//     await game.board?.setState(value)
//   }
// )

// watch(
//   () => gameStore.sessionState,
//   (value: MatchSessionDto | undefined) => {
//     if (value === undefined) return

//     // logger.debug('gameSessionState-------------------------------------- :>> ', value)
//   }
// )

// watch(
//   () => gameStore.playerState,
//   (value: PlayerDto | undefined) => {
//     if (value === undefined) return
//     game.hand.update(value as PlayerDto)
//   }
// )

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>
