let canvasElm = document.querySelector(".canvasElm");

canvasElm.width = window.innerWidth;
canvasElm.height = window.innerHeight;

let gravity = 0.5;
let friction = 0.01;
let bounce = 0.7;

let circleColor = "rgba(0, 0, 0, 0)";

function randomBetween(min, max) {
  return Math.random() * (max - min) + min;
}

let ctx = canvasElm.getContext("2d");

class Particle {
  constructor(x, y, dx, dy, size) {
    this.x = x;
    this.y = y;
    this.dx = dx;
    this.dy = dy;
    this.size = size;
  }

  draw() {
    ctx.beginPath();
    ctx.strokeStyle = "rgba(0, 240, 255, 1)";
    ctx.lineWidth = 2;
    ctx.fillStyle = circleColor;
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
    ctx.stroke();

    this.update();
  }

  friction() {
    if (this.dx > 0) {
      this.dx -= friction;
    } else {
      this.dx += friction;
    }
  }

  update() {
    this.x += this.dx;
    this.y += this.dy;
    this.dy += gravity;

    // Side walls detection
    if (this.x + this.size > canvasElm.width || this.x - this.size < 0) {
      this.dx *= -1;
      this.friction();
    }

    // Prevents circles from sticking to the right side
    if (this.x + this.size > canvasElm.width) {
      this.x = canvasElm.width - this.size;
    }
    // Prevents circles from sticking to the left side
    if (this.x - this.size < 0) {
      this.x = this.size;
    }

    // Detect bottom side
    if (this.y + this.size + this.dy > canvasElm.height) {
      // reposition circle to bottom of the page
      this.y = canvasElm.height - this.size;

      this.dy *= -bounce;
      this.friction();
    }

    // Detect top side
    if (this.y + this.size <= 0) {
      this.y = 0 + this.size;
      this.dy *= -bounce;
    }

    // stop the bouncing if the ball's velocity is between 0 & -2
    if (this.dy < 0 && this.dy > -2.2) {
      this.dy = 0;
    }

    // stop moving on X axis if x velocity after
    if (Math.abs(this.dx) < 0.1) {
      this.dx = 0;
    }
  }
}

// Create particle objects
let particlesCount = 7;
let particlesArray = [];

for (let i = 0; i < particlesCount; i++) {
  let size = randomBetween(10, 30);
  let x = randomBetween(size, canvasElm.width - size);
  let y = randomBetween(size, canvasElm.height / 2);
  // let y = canvasElm.height / 2;
  // let dx = 20 / size * 15;
  let dx = (randomBetween(-25, 25) / size) * 15;
  // let dx = 20;
  // let dy = 20 / size * 15;
  let dy = (randomBetween(-15, 15) / size) * 15;
  // let dy = 25;
  particlesArray.push(new Particle(x, y, dx, dy, size));
}

// Preview circle size and position on click and hold
let previewCircle = {
  x: 0,
  y: 0,
  dx: 0,
  dy: 0,
  size: 0
};
let countDownTimer;

document.addEventListener("mousedown", (e) => {
  countDownTimer = setInterval(() => {
    previewCircle.size += 0.3;
  }, 5);

  // Update preview circle position and size
  previewCircle.x = e.offsetX;
  previewCircle.y = e.offsetY;
});
document.addEventListener("mousemove", (e) => {
  previewCircle.x = e.offsetX;
  previewCircle.y = e.offsetY;
});
document.addEventListener("mouseup", (e) => {
  clearInterval(countDownTimer);
  let size = previewCircle.size;
  let x = e.offsetX;
  let y = e.offsetY;
  let dx = (randomBetween(-25, 25) / size) * 15;
  let dy = (randomBetween(-15, 15) / size) * 15;
  particlesArray.push(new Particle(x, y, dx, dy, size));
  previewCircle.size = 0;
});

// Resize canvas on window resize
window.addEventListener("resize", () => {
  canvasElm.height = window.innerHeight;
  canvasElm.width = window.innerWidth;
});

function animate() {
  ctx.clearRect(0, 0, canvasElm.width, canvasElm.height);

  // Preview circle
  new Particle(
    previewCircle.x,
    previewCircle.y,
    previewCircle.dx,
    previewCircle.dy,
    previewCircle.size
  ).draw();

  for (let i = 0; i < particlesArray.length; i++) {
    particlesArray[i].draw();
  }
  requestAnimationFrame(animate);
}
animate();