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

<script setup lang="ts">
import { wait } from '@/common/helpers'
import type { MatchSessionOptions } from '@/common/interfaces'
import { dataGameStatePlayer, dataPlayer, players } from '@/common/testMocks'
import { Button } from '@/game/Button'
import { Game } from '@/game/Game'
import { TimedButton } from '@/game/TimedButton'
import { Point } from 'pixi.js'
import { onMounted, ref } from 'vue'

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: 'green',
  teamed: false,
  winType: 'points',
  winTarget: 100,
  seed: '',
  sessionName: `Test #${Date.now()}`,
  numPlayers: 1,
  turnWaitSeconds: 30,
}
const gameOptionsValue: MatchSessionOptions = {
  ...defaultOptions,
  ...{ screen: { width: screenWidth, height: screenHeight, boardScale: boardScale, handScale: 1 } },
}

const game = new Game(gameOptionsValue, undefined, dataPlayer.id, 'test-session-id')

onMounted(async () => {
  if (appEl.value === null) return
  const canvas = await game.setup()
  appEl.value.appendChild(canvas)
  await game.preload()
  game.start(players)
  game.hand.update(dataPlayer)
  game.updateOtherHands(dataGameStatePlayer)
  await wait(1000)
  game.hand.setActive(true)
  game.hand.prepareForMove(true)
  const btn = new Button('TEST BUTTON', new Point(100, 100), { width: 130 }, () => {
    console.log('Button clicked')
  })
  btn.disabled = false
  btn.disabledColor = 0x666666
  game.stage.addChild(btn)
  const timedBtn = new TimedButton(
    'TIMED BUTTON',
    new Point(100, 400),
    { width: 150, height: 40 },
    () => {
      console.log('Timed button clicked')
      timedBtn.disabled = true
    },
    5,
  )
  timedBtn.on('timeout', () => {
    console.log('Timed button timed out')
    timedBtn.disabled = true
  })
  game.stage.addChild(timedBtn)
  timedBtn.start()
})
</script>

<style scoped></style>
