import Game from './game.js'
import { Router } from './router.js'
import { preloadEveryThing } from './preloader.js'
import { mainMenuLevel } from './levelList.js'

const router = new Router()
const titleBack = document.getElementById("title-back")
let game

document.addEventListener('DOMContentLoaded', async () => {
  await preloadEveryThing()
  init()
})

async function init() {
  game = new Game()
  router.showPage("mainMenu")
  await loadMenu()
  mainRenderLoop()
  document.getElementById("custom-level-launch").addEventListener("click", () => setCustomLevel())
  document.getElementById("custom-level-back").addEventListener("click", () => router.showPage("mainMenu"))
  document.getElementById("game-over-back").addEventListener("click", () => router.showPage("mainMenu"))
}

async function mainRenderLoop () {
  game.player.analyse()
  
  if (router.currentPage === "mainMenu") {
    const valueBass = game.player.getRangeAverageRatio(0 ,10)
    const scaleBass = (1.25 - 1) * valueBass
    titleBack.style.transform = `scale(${1 + scaleBass}) translateZ(0)`
  }
  
  if (game.currentLevel) {
    const value = game.player.getRangeAverageRatio(game.currentLevel.startingValue, game.currentLevel.nbValue)
    if (value > game.currentLevel.threshold) {
      game.spawnMeteor()
    }
  
    if (game.health <= 0 && router.currentPage === "mainGame") {
      game.player.stop()
      game = new Game()
      game.setGameCanvas(false)
      await game.loadMainMenu(mainMenuLevel)
      router.showPage("gameOver")
    }
    
    game.render()
  }  

  requestAnimationFrame(mainRenderLoop, game.canvas)
}

async function loadMenu() {
  const itemTemplate = document.getElementById("menuItem");
  const itemCustomTemplate = document.getElementById("menuItemCustom");

  const menuContainer = document.getElementById("menuContainer");

  for (const level of game.levelList) {
    const menuItem = document.importNode(itemTemplate.content, true)
    
    menuItem.querySelector("img").src = level.bossPath
    menuItem.querySelector("p").textContent = level.title
    menuItem.querySelector("button").addEventListener("click", () => loadLevel(level))

    menuContainer.appendChild(menuItem)
  }

  const customItem = document.importNode(itemCustomTemplate.content, true)
  customItem.querySelector("button").addEventListener("click", () => router.showPage("customLevel"))
  menuContainer.appendChild(customItem)

  game.setGameCanvas(false)
  await game.loadMainMenu(mainMenuLevel)
}

function loadLevel(level) {
  router.showPage("mainGame")
  game.setGameCanvas(true)
  game.loadLevel(level)
}

function setCustomLevel() {
  console.log('custom level')
}