const Victor = require("victor");
const dat = require("dat.gui");

// TODO cycle this bkg color
const BACKGROUND_COLOR = 'rgba(11, 51, 56, 1)';
const PARTICLE_RADIUS       = 1;
const G_POINT_RADIUS        = 10;
const G_POINT_RADIUS_LIMITS = 65;

const canvas = document.getElementById("mainCanvas");
const bufferCvs = document.createElement("canvas");
const context = canvas.getContext('2d');
const bufferCtx = bufferCvs.getContext('2d');

let screenWidth = canvas.width = window.innerWidth;
let screenHeight = canvas.height = window.innerHeight;


let grad = null;

const resize = (e) => {
    screenWidth  = canvas.width  = window.innerWidth;
    screenHeight = canvas.height = window.innerHeight;
    bufferCvs.width  = screenWidth;
    bufferCvs.height = screenHeight;

    // create circular gradient that fills the screen
    const cx = canvas.width / 2;
    const cy = canvas.height / 2;

    grad =context.createRadialGradient(cx, cy, 0, cx, cy, Math.sqrt(cx * cx + cy * cy));
    grad.addColorStop(0, 'rgba(0, 0, 0, 0)');
    grad.addColorStop(1, 'rgba(0, 0, 0, 0.35)');
};

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


const particles = [];
const addParticle = (num) => {

};

const removeParticle = (num) => {

};

const controls = {
    particleNum: 100
};

const gui = new dat.GUI();
gui.add(controls, "particleNum").min(0).max(500).step(1).name("Particle Num").onChange(function() {
    var n = (controls.particleNum | 0) - particles.length;
    if (n > 0) {
        addParticle(n);
    } else if (n < 0) {
        removeParticle(-n);
    }
});
//gui.add(GravityPoint, 'interferenceToPoint').name('Interference Between Point');
gui.close();



console.log("Finished initting");

const loop = (timestamp) => {
    window.requestAnimationFrame(loop);

    const cx = canvas.width / 2;
    const cy = canvas.height / 2;

    context.save();
    context.fillStyle = BACKGROUND_COLOR;
    context.fillRect(0, 0, screenWidth, screenHeight);


    context.fillStyle = grad;
    context.fillRect(0, 0, screenWidth, screenHeight);
    context.restore();
};


loop();