var canvas = document.querySelector("canvas");

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

var context = canvas.getContext("2d");

class globalSettings {
    constructor() {
        this.runAnimation = true;
        
        this.emitterPosition_x = canvas.width / 2;
        this.emitterPosition_y = canvas.height / 2;
    }
}

class particleSettings { 
    constructor() {
        this.min_lifetime = 1;
        this.lifetime_range = 0.5;

        this.min_angle = 80;
        this.angle_range = 20;

        this.min_speed = 10;
        this.speed_range = 140;

        this.min_size = 2;
        this.size_range = 10;

        this.start_colors = {
            "Color 1": { color: {r: 239, g: 127, b: 67}, alpha: 0.7 },
            "Color 2": { color: {r: 253, g: 69, b: 69}, alpha: 0.8 },
            "Color 3": { color: {r: 239, g: 100, b: 67}, alpha: 0.7 }
        }
        
        this.end_colors = {
            "Color 1": { color: {r: 90, g: 90, b: 90}, alpha: 0 },
            "Color 2": { color: {r: 110, g: 110, b: 110}, alpha: 0 },
            "Color 3": { color: {r: 130, g: 130, b: 130}, alpha: 0 }
        }
    }
}

class emitterSettings {
    constructor() {
        this.emission_rate = 1000;

        this.gravity_x = 0;
        this.gravity_y = -100;

        this.min_position_x = -20;
        this.min_position_y = -20;

        this.position_range_x = 40;
        this.position_range_y = 40;
    }
}

class Settings {
    constructor() {
        this.global = new globalSettings();
        this.particle = new particleSettings();
        this.emitter = new emitterSettings();
    }
}

var currentSettings = new Settings();
var defaultSettings = JSON.parse(document.getElementById("default_settings").innerHTML);

var gui = new dat.GUI({
    load: defaultSettings
});

gui.width = 400;

gui.remember(currentSettings.global);
gui.remember(currentSettings.particle);

Object.keys(currentSettings.particle.start_colors).forEach((key) => {
    gui.remember(currentSettings.particle.start_colors[key]);
});

Object.keys(currentSettings.particle.end_colors).forEach((key) => {
    gui.remember(currentSettings.particle.end_colors[key]);
});

gui.remember(currentSettings.emitter);

var gui_global = gui.addFolder("Global Settings");

var gui_global_runAnim = gui_global.add(currentSettings.global, "runAnimation");
gui_global_runAnim.name("Run animation");
gui_global_runAnim.onChange( () => {
    if(gui_global_runAnim.getValue() === true) { // getValue() returns the value _after_ the change
        emitter.last_update = 0;
        emitter.last_emission = 0;
        emitter.particles = [];
        emitter.updateProperties();
        
        requestAnimationFrame(mainLoop);
    }
});

var gui_global_emitter_posX = gui_global.add(currentSettings.global, "emitterPosition_x", 0.0, canvas.width, 1.0);
gui_global_emitter_posX.name("Emitter center position X");
gui_global_emitter_posX.onChange( () => {
    emitter.updateProperties();
});

var gui_global_emitter_posY = gui_global.add(currentSettings.global, "emitterPosition_y", 0.0, canvas.height, 1.0);
gui_global_emitter_posY.name("Emitter center position Y");
gui_global_emitter_posY.onChange( () => {
    emitter.updateProperties();
});

//gui_global.open();

var gui_particles = gui.addFolder("Particle Settings");

gui_particles.add(currentSettings.particle, "min_lifetime", 0.1, 5.0, 0.1).name("min. Lifetime (in sec.)");
gui_particles.add(currentSettings.particle, "lifetime_range", 0.0, 5.0, 0.1).name("Lifetime range (in sec.)");

gui_particles.add(currentSettings.particle, "min_angle", 0.0, 360.0, 1.0).name("min. Angle (in deg.)");
gui_particles.add(currentSettings.particle, "angle_range", 0.0, 360.0, 1.0).name("Angle range (in deg.)");

gui_particles.add(currentSettings.particle, "min_speed", 0.0, 200.0, 1.0).name("min. Speed");
gui_particles.add(currentSettings.particle, "speed_range", 0.0, 200.0, 1.0).name("Speed range");

gui_particles.add(currentSettings.particle, "min_size", 0.0, 20.0, 1.0).name("min. Size");
gui_particles.add(currentSettings.particle, "size_range", 0.0, 20.0, 1.0).name("Size range");

var gui_particles_start_colors = gui_particles.addFolder("Particle Start Colors");

Object.keys(currentSettings.particle.start_colors).forEach((key) => {
    gui_particles_start_colors.addColor(currentSettings.particle.start_colors[key], "color").name(key + " RGB");
    gui_particles_start_colors.add(currentSettings.particle.start_colors[key], "alpha", 0.0, 1.0).name(key + " Alpha");
});

//gui_particles_start_colors.open();

var gui_particles_end_colors = gui_particles.addFolder("Particle End Colors");

Object.keys(currentSettings.particle.end_colors).forEach((key) => {
    gui_particles_end_colors.addColor(currentSettings.particle.end_colors[key], "color").name(key + " RGB");
    gui_particles_end_colors.add(currentSettings.particle.end_colors[key], "alpha", 0.0, 1.0).name(key + " Alpha");
});

//gui_particles_end_colors.open();

//gui_particles.open();

var gui_emitter = gui.addFolder("Emitter Settings");

gui_emitter.add(currentSettings.emitter, "emission_rate", 0.0, 5000.0, 1.0).name("Emission rate (1 / sec.)").onChange( () => { emitter.updateProperties(); });

gui_emitter.add(currentSettings.emitter, "gravity_x", -1000.0, 1000.0, 1.0).name("Gravity X").onChange( () => { emitter.updateProperties(); });
gui_emitter.add(currentSettings.emitter, "gravity_y", -1000.0, 1000.0, 1.0).name("Gravity Y").onChange( () => { emitter.updateProperties(); });

gui_emitter.add(currentSettings.emitter, "min_position_x", -500.0, 500.0, 1.0).name("min. Position X").onChange( () => { emitter.updateProperties(); });
gui_emitter.add(currentSettings.emitter, "min_position_y", -500.0, 500.0, 1.0).name("min. Position Y").onChange( () => { emitter.updateProperties(); });

gui_emitter.add(currentSettings.emitter, "position_range_x", 0.0, 1000.0, 1.0).name("Position Range X").onChange( () => { emitter.updateProperties(); });
gui_emitter.add(currentSettings.emitter, "position_range_y", 0.0, 1000.0, 1.0).name("Position Range Y").onChange( () => { emitter.updateProperties(); });

//gui_emitter.open();

gui.close();

addEventListener("resize", () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
    gui_global_emitter_posX.max(canvas.width);
    gui_global_emitter_posY.max(canvas.height)
    
    if(gui_global_emitter_posX.getValue() > canvas.width) {
        gui_global_emitter_posX.setValue(canvas.width / 2);
    }
    
    if(gui_global_emitter_posY.getValue() > canvas.height) {
        gui_global_emitter_posY.setValue(canvas.height / 2);
    }
    
    gui_global_emitter_posX.updateDisplay();
    gui_global_emitter_posY.updateDisplay();
    
    emitter.updateProperties();
});

class Particle {
    constructor(x,y) {
        this.min_size = currentSettings.particle.min_size;
        this.size_range = currentSettings.particle.size_range;
        
        this.min_angle = currentSettings.particle.min_angle;
        this.angle_range = currentSettings.particle.angle_range;
        
        this.min_speed = currentSettings.particle.min_speed;
        this.speed_range = currentSettings.particle.speed_range;
        
        this.min_lifetime = currentSettings.particle.min_lifetime;
        this.lifetime_range = currentSettings.particle.lifetime_range;
        
        this.start_colors = currentSettings.particle.start_colors;
        this.end_colors = currentSettings.particle.end_colors;
        
        // the particle's position
        this.position_x = x;
        this.position_y = y;
        
        // state of the particle's life
        this.time_lived = 0;
        this.is_dead = false;

        // calculate the particle's properties based on the settings
        this.size = this.min_size + Math.random() * this.size_range;

        this.angle = this.min_angle + Math.random() * this.angle_range;
        this.speed = this.min_speed + Math.random() * this.speed_range;

        this.lifetime = this.min_lifetime + Math.random() * this.lifetime_range;
        
        // the particle's velocity
        this.velocity_x = Math.cos(this.angle * Math.PI / 180) * this.speed;
        this.velocity_y = -Math.sin(this.angle * Math.PI / 180) * this.speed;

        // the particle's color values
        this.start_color = Object.values(this.start_colors)[Math.floor(Object.values(this.start_colors).length * Math.random())];
        this.end_color = Object.values(this.end_colors)[Math.floor(Object.values(this.end_colors).length * Math.random())];

        this.color = {
            r: this.start_color.color.r, // red
            g: this.start_color.color.g, // green
            b: this.start_color.color.b, // blue
            a: this.start_color.alpha    // alpha
        };
        
        this.color_step = {
            r: (this.end_color.color.r - this.start_color.color.r) / this.lifetime, // red
            g: (this.end_color.color.g - this.start_color.color.g) / this.lifetime, // green
            b: (this.end_color.color.b - this.start_color.color.b) / this.lifetime, // blue
            a: (this.end_color.alpha   - this.start_color.alpha  ) / this.lifetime // alpha
        };
    }
    
    update(seconds_since_last_update) {
        // calculate the particle's new position based on the forces multiplied by seconds passed
        this.velocity_x += emitter.gravity_x * seconds_since_last_update;
        this.velocity_y += emitter.gravity_y * seconds_since_last_update;

        this.position_x += this.velocity_x * seconds_since_last_update;
        this.position_y += this.velocity_y * seconds_since_last_update;

        // calculate new color and draw the particle
        this.color.r += this.color_step.r * seconds_since_last_update;
        this.color.g += this.color_step.g * seconds_since_last_update;
        this.color.b += this.color_step.b * seconds_since_last_update;
        this.color.a += this.color_step.a * seconds_since_last_update;
    }
    
    render() {
        var r = Math.round(this.color.r);
        var g = Math.round(this.color.g);
        var b = Math.round(this.color.b);
        var a = this.color.a;
        
        context.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;

        context.beginPath();
        context.arc(this.position_x, this.position_y, this.size, 0, Math.PI * 2);
        context.fill();
    }
}

class Emitter {
    constructor() {
        // the emitter's position
        this.pos_x = 0;
        this.pos_y = 0;

        this.gravity_x = 0;
        this.gravity_y = 0;
        
        // How often the emitter needs to create a particle per second
        this.emission_rate = 1;
        
        // How long to wait, before a new particle is created (in milliseconds)
        this.emission_delay = 1000 / this.emission_rate;

        // particle position settings
        this.min_position_x = 0;
        this.min_position_y = 0;

        this.position_range_x = 0;
        this.position_range_y = 0;
        
        this.last_update = 0;
        this.last_emission = 0;

        // the emitter's particle objects
        this.particles = [];
    }
    
    reset() {
        this.last_update = 0;
        this.last_emission = 0;

        // the emitter's particle objects
        this.particles = [];

        this.updateProperties();        
    }
    
    updateProperties() {
        // the emitter's position
        this.pos_x = currentSettings.global.emitterPosition_x;
        this.pos_y = currentSettings.global.emitterPosition_y;

        this.gravity_x = currentSettings.emitter.gravity_x;
        this.gravity_y = currentSettings.emitter.gravity_y;
        
        // How often the emitter needs to create a particle per second
        this.emission_rate = currentSettings.emitter.emission_rate;
        
        // How long to wait, before a new particle is created (in milliseconds)
        this.emission_delay = 1000 / this.emission_rate;

        // particle position settings
        this.min_position_x = currentSettings.emitter.min_position_x;
        this.min_position_y = currentSettings.emitter.min_position_y;

        this.position_range_x = currentSettings.emitter.position_range_x;
        this.position_range_y = currentSettings.emitter.position_range_y;
    }
    
    render() {
        // set the last_update variable to now if it's the first update
        if (this.last_update === 0) {
            this.last_update = Date.now();
            return;
        }

        context.save();
        context.translate(this.pos_x, this.pos_y);
            
        // get the current time
        var time = Date.now();

        // work out the milliseconds since the last update
        var ms_since_last_update = time - this.last_update;

        // add them to the milliseconds since the last particle emission
        this.last_emission += ms_since_last_update;

        // set last_update to now
        this.last_update = time;

        // check if we need to emit a new particle
        if (this.last_emission > this.emission_delay) {

            // find out how many particles we need to emit
            var particle_count_to_emit = Math.floor(this.last_emission / this.emission_delay);

            // subtract the appropriate amount of milliseconds from last_emission
            this.last_emission -= particle_count_to_emit * this.emission_delay;

            while (particle_count_to_emit--) {
                var particle_position_x = this.min_position_x + Math.random() * this.position_range_x;
                var particle_position_y = this.min_position_y + Math.random() * this.position_range_y;
                
                this.particles.push(new Particle(particle_position_x, particle_position_y));
            }
        }

        // convert milliseconds to seconds
        var seconds_since_last_update = ms_since_last_update / 1000;

        // loop through the existing particles
        var particle_number_to_process = this.particles.length;

        while (particle_number_to_process--) {
            var particle = this.particles[particle_number_to_process];

            // skip if the particle is dead
            if (particle.is_dead) {

                // remove the particle from the array
                this.particles.splice(particle_number_to_process, 1);
                continue;
            }

            // add the seconds passed to the particle's lifetime
            particle.time_lived += seconds_since_last_update;

            // check if the particle should be dead
            if (particle.time_lived >= particle.lifetime) {
                particle.is_dead = true;
                continue;
            }

            // calculate the particle's new position based on the forces multiplied by seconds passed
            particle.update(seconds_since_last_update);

            // draw the particle
            particle.render();
        }

        context.restore();
    }
}

var emitter = new Emitter();
emitter.updateProperties();

function mainLoop() {
    if (currentSettings.global.runAnimation) {
        requestAnimationFrame(mainLoop);
    }
    
    context.clearRect(0, 0, canvas.width, canvas.height);
    
    emitter.render();
}

requestAnimationFrame(mainLoop);