import { onMounted, onUnmounted, watch } from 'vue'
import { Engine } from '@engine/core/Engine'
import type { GameData } from '@engine/types'
import { useGameStore } from '@/stores/gameStore'

export function useGameEngine(videoEl: () => HTMLVideoElement | null) {
  const engine = new Engine()
  const store = useGameStore()

  async function loadGame(dataUrl: string) {
    const resp = await fetch(dataUrl)
    const data: GameData = await resp.json()
    engine.sceneManager.load(data)
    engine.stateManager.init(data.variables)
  }

  function start() {
    engine.videoManager.attach(videoEl()!)

    engine.on('sceneChange', (scene) => {
      store.setScene(scene)
      store.clearChoices()
    })

    engine.on('choiceRequest', (choiceList) => {
      store.setChoices(choiceList)
    })

    engine.on('videoEnd', () => {})

    engine.on('gameEnd', () => {
      store.setGameEnded(true)
    })

    engine.start()
  }

  function makeChoice(index: number) {
    const scene = store.currentScene
    if (!scene?.choices) return
    engine.makeChoice(scene.choices[index])
  }

  function destroy() {
    engine.destroy()
  }

  onUnmounted(() => {
    destroy()
  })

  return { loadGame, start, makeChoice, destroy, engine }
}