// Canvas
let canvas = document.querySelector("canvas");
// Canvas settings
console.log(canvas);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// Context
let ctx = canvas.getContext("2d");
// Context settings
ctx.fillStyle = "white";
ctx.strokeStyle = "rgb(255,255,255)";
ctx.lineWidth = 2;

// Particles
class Particle {
	constructor(effect) {
		this.effect = effect;
		this.x = Math.floor(Math.random() * this.effect.width);
		this.y = Math.floor(Math.random() * this.effect.height);
		this.speedX;
		this.speedY;
		this.speedModifier = Math.floor(Math.random() * 5 + 1);
		this.history = [{ x: this.x, y: this.y }];
		this.maxLength = Math.floor(Math.random() * 100 + 10);
		this.timer = this.maxLength * 2;
		this.angle = 0;
	}
	draw(context) {
		context.beginPath();
		context.moveTo(this.history[0].x, this.history[0].y);
		for (let i = 0; i < this.history.length; i++) {
			context.lineTo(this.history[i].x, this.history[i].y);
		}
		context.stroke();
	}
	update() {
		this.timer--;
		if (this.timer >= 1) {
			let x = Math.floor(this.x / this.effect.cellSize);
			ctx.strokeStyle = getRandomColor();
			let y = Math.floor(this.y / this.effect.cellSize);
			let index = y * this.effect.cols + x;
			this.angle = this.effect.flowField[index];

			this.speedX = Math.cos(this.angle);
			this.speedY = Math.sin(this.angle);
			this.x += this.speedX * this.speedModifier;
			this.y += this.speedY * this.speedModifier;

			this.history.push({ x: this.x, y: this.y });

			if (this.history.length > this.maxLength) {
				this.history.shift();
			}
		} else if (this.history.length > 1) {
			this.history.shift();
		} else {
			this.reset();
		}
	}
	reset() {
		this.x = Math.floor(Math.random() * this.effect.width);
		this.y = Math.floor(Math.random() * this.effect.height);
		this.history = [{ x: this.x, y: this.y }];
		this.timer = this.maxLength * 2;
	}
}

// Effect
class Effect {
	constructor(width, height) {
		this.width = width;
		this.height = height;
		this.particles = [];
		this.numberOfParticles = 2000;
		this.cellSize = 8;
		this.rows;
		this.cols;
		this.flowField = [];
		this.curve = 6;
		this.zoom = 0.05;
		this.init();
	}
	init() {
		// create flow field
		this.rows = Math.floor(this.height / this.cellSize);
		this.cols = Math.floor(this.width / this.cellSize);
		this.flowField = [];
		for (let y = 0; y < this.rows; y++) {
			for (let x = 0; x < this.cols; x++) {
				let angle =
					(Math.cos(x * this.zoom) + Math.sin(y * this.zoom)) * this.curve;
				this.flowField.push(angle);
			}
		}
		console.log(this.flowField);

		// create particles
		for (let i = 0; i < this.numberOfParticles; i++) {
			this.particles.push(new Particle(this));
		}
	}
	render(context) {
		this.particles.forEach((particle) => {
			particle.draw(context);
			particle.update();
		});
	}
}

const effect = new Effect(canvas.width, canvas.height);
console.log(effect);

// Função para gerar uma cor RGB aleatória
function getRandomColor() {
	const r = Math.floor(Math.random() * 256); // Valor aleatório para o canal vermelho (0-255)
	// const g = Math.floor(Math.random() * 128); // Valor aleatório para o canal verde (0-255)
	// const b = Math.floor(Math.random() * 128); // Valor aleatório para o canal azul (0-255)
	const g = 64;
	const b = 200;

	// Retorna a cor no formato "rgb(r, g, b)"
	return `rgb(${r}, ${g}, ${b})`;
}

function animate() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	effect.render(ctx);
	requestAnimationFrame(animate);
}
animate();