const app = new PIXI.Application({
  view: document.getElementById('main'),
  width: 512,
  height: 512,
  antialias: true,
  transparent: false,
  backgroundColor: 0x00CC99,
});

const stats = new Stats();
stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
stats.domElement.style.position = 'absolute';
stats.domElement.style.right = '50%';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
function animate() {
  stats.begin();
  // monitored code goes here
  stats.end();
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

const loader = new PIXI.Loader();
loader
  .add('fakeimg','https://i.imgur.com/j5QyG2t.png')
  .load((loader, resource)=> {
  console.log('Done');
  init(resource);
})

const emojiContainer = new PIXI.Container();
const textContainer = new PIXI.Container();

app.stage.addChild(emojiContainer);
app.stage.addChild(textContainer);

const datGuiData = function() {
  this.speedVy = 5;
  this.alpha = 0.05;
  this.containerX = 0;
  this.containerY = 0;
}

const datGuiTools = new datGuiData();
const gui = new dat.GUI();
gui.add(datGuiTools, 'speedVy', 0, 100);
gui.add(datGuiTools, 'alpha', 0, 1);
gui.add(datGuiTools, 'containerX', 0, 512);
gui.add(datGuiTools, 'containerY', -512, 512);

function init(item) {
  const sprite = new PIXI.Sprite(item.fakeimg.texture);
  emojiContainer.addChild(sprite);
  sprite.vy = datGuiTools.speedVy;
  
  app.ticker.add((delta) => {
    tickerLoop(delta);
  })
  function tickerLoop(delta) {
    emojiContainer.x = datGuiTools.containerX;
    emojiContainer.y = datGuiTools.containerY;
    sprite.y += datGuiTools.speedVy;
    let status = contain(sprite, {x: 0, y: 20, width: 512, height: 512});
    if(status === 'top' || status === 'bottom') {
      datGuiTools.speedVy *= -1;
      hurt(status);
    }
  }
}

function hurt(status) {
  if(status === 'top') {
    const containerEffect  = new PIXI.Container();
    const graphics = new PIXI.Graphics();
    const startText = new PIXI.Text(getRandom(2000),{
      fill: 0xDDD00D,
    });
    // graphics.lineStyle(5, 0x000000, 1);
    graphics.beginFill(0x9D482E);
    graphics.drawStar(0, 0, 10, 100);
    graphics.endFill();
    
    graphics.x = getRandom(150);
    graphics.y = getRandom(150);
    
    startText.x = graphics.x - startText.width / 2;
    startText.y = graphics.y - startText.height / 2;
    
    containerEffect.addChild(graphics);
    containerEffect.addChild(startText);
    
    app.stage.addChild(containerEffect);
    
    removeContainer(containerEffect);
  }
}

function getRandom(x){
  return Math.floor(Math.random() * x) + 1;
};


function removeContainer(item) {

}

function contain(sprite, container) {
  let collision = undefined;
  //Left
  if (sprite.x < container.x) {
    sprite.x = container.x;
    collision = "left";
  }
  //Top
  if (sprite.y < container.y) {
    sprite.y = container.y;
    collision = "top";
  }
  //Right
  if (sprite.x + sprite.width > container.width) {
    sprite.x = container.width - sprite.width;
    collision = "right";
  }
  //Bottom
  if (sprite.y + sprite.height > container.height) {
    sprite.y = container.height - sprite.height;
    collision = "bottom";
  }
  //Return the `collision` value
  return collision;
}