import * as PIXI from "pixi.js"
import * as ECSY from "ecsy"
import { Entity } from "ecsy";

const NUM_ELEMENTS = 60;
const SPEED_MULTIPLIER = 1;
const SHAPE_SIZE = 10;
const SHAPE_HALF_SIZE = SHAPE_SIZE / 2;

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

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

recalculateSize();

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

function recalculateSize(){
  let multiplier = Math.min(0, 0);
  app.view.style.width = canvasWidth + "px";
  app.view.style.height = "720px";
}

const bgTex = PIXI.Sprite.from('../assets/Background.png');
app.stage.addChild(bgTex);

//----------------------
// Components
//----------------------

// Velocity component
class Velocity {
  x = 0;
  y = 0;
}

// Position component
class Position {
  x = 0;
  y = 0;
}

// Shape component
class Shape {
  onStage = false
  shape: PIXI.Graphics
}

// Renderable component
class Renderable extends ECSY.TagComponent {}

//----------------------
// Systems
//----------------------

// MovableSystem
class MovableSystem extends ECSY.System {
  // This method will get called on every frame by default
  execute(delta : number) {
    // Iterate through all the entities on the query
    MovableSystem.queries.moving.results.forEach((entity: Entity) => {
      var velocity = entity.getComponent(Velocity);
      var position = entity.getMutableComponent(Position);
      position.x += velocity.x * delta;
      position.y += velocity.y * delta;

      if (position.x > canvasWidth + SHAPE_HALF_SIZE) position.x = - SHAPE_HALF_SIZE;
      if (position.x < - SHAPE_HALF_SIZE) position.x = canvasWidth + SHAPE_HALF_SIZE;
      if (position.y > canvasHeight + SHAPE_HALF_SIZE) position.y = - SHAPE_HALF_SIZE;
      if (position.y < - SHAPE_HALF_SIZE) position.y = canvasHeight + SHAPE_HALF_SIZE;
    });
  }

  static queries = {
    moving: {
      components: [Velocity, Position],
      results: []
    }
  }
}


// RendererSystem
class RendererSystem extends ECSY.System {
  // This method will get called on every frame by default
  execute(delta : number) {

    // Iterate through all the entities on the query
    RendererSystem.queries.renderables.results.forEach((entity: Entity) => {
      var shape = entity.getComponent(Shape);
      var position = entity.getComponent(Position);
      this.drawShape(position, shape);
    });

    //app.renderer.render(app.stage);
  }
  
  drawShape(position : Position, shape : Shape) {
    if(!shape.onStage){
      app.stage.addChild(shape.shape);
      shape.onStage = true;
    }

    shape.shape.x = position.x;
    shape.shape.y = position.y;
  }

  static queries = {
    renderables: { 
        components: [Renderable, Shape],
        results: []
    }
  }
}


// Create world and register the systems on it
var world = new ECSY.World();
world
  .registerSystem(MovableSystem)
  .registerSystem(RendererSystem);

// Some helper functions when creating the components
function getRandomVelocity() {
  return {
    x: SPEED_MULTIPLIER * (2 * Math.random() - 1), 
    y: SPEED_MULTIPLIER * (2 * Math.random() - 1)
  };
}

function getRandomPosition(){
  return { 
    x: Math.random() * canvasWidth, 
    y: Math.random() * canvasHeight
  };
}


function getRandomShape() {
  let graphics = new PIXI.Graphics();
  if(Math.random() >= 0.5) {
    graphics.beginFill(0x888888);
    graphics.lineStyle(1, 0x222222);
    graphics.drawCircle(0, 0, SHAPE_HALF_SIZE);
  } else {
    graphics.beginFill(0xf28d89);
    graphics.lineStyle(1, 0x800904);
    graphics.drawRect(-SHAPE_HALF_SIZE, -SHAPE_HALF_SIZE, SHAPE_SIZE, SHAPE_SIZE);
  }

  return {
    shape: graphics
  };
}

for (let i = 0; i < NUM_ELEMENTS; i++) {
  world
    .createEntity()
    .addComponent(Velocity, getRandomVelocity())
    .addComponent(Shape, getRandomShape())
    .addComponent(Position, getRandomPosition())
    .addComponent(Renderable)        
}

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