import { loadResources } from "./Resources"
import { Door } from "./Components/door"
import { DoorSystem } from "./Systems/DoorSystem"
import { SpriteSystem } from "./Systems/SpriteSystem"
import { Application, Ticker, settings, SCALE_MODES, Sprite, Loader } from "pixi.js"
import { World } from "ecsy"
import { RenderSystem } from "./Systems/RenderSystem"
import { TestSystem } from "./Systems/TestSystem"

// Initialize pixi
export let canvasWidth = 81
export let canvasHeight = 81
export const app = new Application({
  width: canvasWidth, 
  height: canvasHeight, 
  backgroundColor: 0xFFFFFF, 
  resolution: 1,
  antialias: false,
})
document.body.appendChild(app.view)

settings.SCALE_MODE = SCALE_MODES.NEAREST
settings.ROUND_PIXELS = true

recalculateSize()

window.addEventListener( 'resize', recalculateSize, false )

function recalculateSize(){
  let multiplier = Math.min((window.innerWidth/canvasWidth)|0, (window.innerHeight/canvasHeight)|0)
  app.view.style.width = canvasWidth * multiplier + "px"
  app.view.style.height = canvasHeight * multiplier + "px"
}

// Create world and register the systems on it
export let world = new World();
world
  .registerSystem(TestSystem) //prio -100
  .registerSystem(DoorSystem) //prio 0
  .registerSystem(SpriteSystem) //prio 90
  .registerSystem(RenderSystem) //prio 100


loadResources(init)

function init(){
  let resources = Loader.shared.resources;

  //base sprites without entity representation
  const bgTex = new Sprite(resources["Background"].texture)
  app.stage.addChild(bgTex)
  
  //start entities
  world.createEntity()
    .addComponent(Door, <Door>{open: false, 
      openPosition: {x:38, y:2}, openTex: resources["Door"].spritesheet.textures[0],
      closedPosition: {x:38, y:2}, closedTex: resources["Door"].spritesheet.textures[1]})

  // Run!
  Ticker.shared.add((delta : number) => {
    let time = performance.now()
    // Run all the systems
    world.execute(delta, time)
  });
}