const tickSpeed = 30;
const sample = document.getElementById("sample");
const offset = [-10, -10];
const velocityMultiplier = [.4, .4];
const gravity = .75;
const lifespan = 1000;

class Ball {
  constructor(entity, position, hold) {
    this._entity = entity;
    this._position = position;
    this._velocity = [0,0];
    this._hold = hold;
    this._lifespan = 1000;
    document.body.appendChild(entity);
    setTimeout(() => {
      entity.removeAttribute("id");
    }, tickSpeed);
  }

  getEntity() {
    return this._entity;
  }

  getPosition() {
    return this._position;
  }

  getVelocity() {
    return this._velocity;
  }

  getHold() {
    return this._hold;
  }

  getLifespan() {
    return this._lifespan;
  }

  setPosition(position) {
    this._position = position;
    this.getEntity().style.left = `${this.getPosition()[0]}px`;
    this.getEntity().style.top = `${this.getPosition()[1]}px`;
  }

  setVelocity(velocity) {
    this._velocity = velocity;
  }

  updateVelocity(gravity) {
    this._velocity[1] += gravity;
  }

  updateHold(hold=false) {
    this._hold = hold;
  }

  reduceLifespan(reduction=1) {
    this._lifespan -= reduction;
  }

  updatePosition() {
    this.setPosition([this.getPosition()[0] + this.getVelocity()[0], this.getPosition()[1] + this.getVelocity()[1]]);
  }
}

let entities = [];
let mouse = [0,0];
let hold = null;

function mouseMove(event) {
  mouse = [event.clientX + offset[0], event.clientY + offset[1]];
}

document.addEventListener("mousemove", mouseMove);
document.addEventListener("touchmove", event => {
  mouseMove(event.touches[0]);
});

let previousMouse = [0,0];

function down() {
  if (hold == null) {
    hold = true;
    entities.push(new Ball(sample.cloneNode(true), mouse, true));
  }
}

let velocity = [(mouse[0] - previousMouse[0]) * velocityMultiplier[0], (mouse[1] - previousMouse[1]) * velocityMultiplier[1]];

function up() {
  hold = null;
  entities.forEach(entity => {
    if (entity.getHold()) {
      entity.updateHold();
      entity.setVelocity(velocity);
    }
  });
}

document.addEventListener("mousedown", down);
document.addEventListener("touchstart", event => {
  mouseMove(event.touches[0]);
  down();
});
document.addEventListener("keydown", down);

document.addEventListener("mouseup", () => {
  hold = false;
});
document.addEventListener("touchend", () => {
  hold = false;
});
document.addEventListener("keyup", () => {
  hold = false;
});

let burst = false;
let interval;
let duration;

document.addEventListener("keypress", (event) => {
  if (event.key == "Enter") {
    if (burst) {
      clearInterval(interval);
      burst = false;
    } else {
      burst = true;
      duration = 0;
      interval = setInterval(() => {
        if (duration % 2 == 0) {
          down();
        } else {
          up();
        }
        duration += 1;
      }, tickSpeed);
    }
  }
});


function main() {
  if (hold) {
    // previousMouse = mouse;
  } else if (hold === false) {
    up()
  }
  entities.forEach(entity => {
    if (entity.getHold()) {
      entity.setPosition(mouse);
    } else {
      entity.updatePosition();
      entity.updateVelocity(gravity);
      entity.reduceLifespan();
      if (entity.getLifespan() <= 0) {
        entities.splice(0, 1);
        document.body.removeChild(entity.getEntity());
      }
    }
  });
  velocity = [(mouse[0] - previousMouse[0]) * velocityMultiplier[0], (mouse[1] - previousMouse[1]) * velocityMultiplier[1]];
  console.log(velocity);
  if (velocity[0] == 0 && velocity[1] == 0) {
    velocity = [Math.random() * 10 - 5, Math.random() * 10 - 5];
  }
  previousMouse = mouse;
  
  requestAnimationFrame(main);
}

// setInterval(main, tickSpeed);
requestAnimationFrame(main);