const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const upload = document.getElementById("upload");
let img = new Image();
upload.addEventListener("change", (e) => {
	const file = e.target.files[0];
	const reader = new FileReader();
	reader.onload = function(event) {
		img.onload = function() {
			ctx.globalCompositeOperation = "copy";
			ctx.drawImage(ctx.canvas, 0, 0);
			canvas.width = img.width;
			canvas.height = img.height;
			ctx.drawImage(img, 0, 0);
		}
		img.src = event.target.result;
	}
	reader.readAsDataURL(file);
});

function contrastImage(imageData, contrast) {
	var data = imageData.data;
	var factor = (259 * (contrast + 255)) / (255 * (259 - contrast));
	for(var i = 0; i < data.length; i += 4) {
		data[i] = factor * (data[i] - 128) + 128;
		data[i + 1] = factor * (data[i + 1] - 128) + 128;
		data[i + 2] = factor * (data[i + 2] - 128) + 128;
	}
	return imageData;
}

function randomRGB() {
	let r = Math.random();
	let g = Math.random();
	let b = Math.random();
	const sum = r + g + b;
	r /= sum;
	g /= sum;
	b /= sum;
	return [r, g, b];
}

function applyOhNo() {
	const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
	const data = imageData.data;
	const [r1, g1, b1] = randomRGB();
	const [r2, g2, b2] = randomRGB();
	const [r3, g3, b3] = randomRGB();
	for(let i = 0; i < data.length; i += 4) {
		let r = data[i];
		let g = data[i + 1];
		let b = data[i + 2];
		data[i] = Math.min(Math.round(r1 * r + g1 * g + b1 * b), 255);
		data[i + 1] = Math.min(Math.round(r2 * r + g2 * g + b2 * b), 155);
		data[i + 2] = Math.min(Math.round(r3 * r + g3 * g + b3 * b), 155);
	}
	var newImageData = contrastImage(imageData, 100);
	ctx.putImageData(imageData, 0, 0);
}

function applyOhYes() {
	const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
	const data = imageData.data;
	const [r1, g1, b1] = randomRGB();
	const [r2, g2, b2] = randomRGB();
	const [r3, g3, b3] = randomRGB();
	for(let i = 0; i < data.length; i += 4) {
		let r = data[i];
		let g = data[i + 1];
		let b = data[i + 2];
		data[i] = Math.min(Math.round(r1 * r + g1 * g + b1 * b), 255);
		data[i + 1] = Math.min(Math.round(r2 * r + g2 * g + b2 * b), 55);
		data[i + 2] = Math.min(Math.round(r3 * r + g3 * g + b3 * b), 55);
	}
	var newImageData = contrastImage(imageData, 100);
	ctx.putImageData(imageData, 0, 0);
}

function applyActualMitziMode() {
	const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
	const data = imageData.data;
	const [r1, g1, b1] = randomRGB();
	const [r2, g2, b2] = randomRGB();
	const [r3, g3, b3] = randomRGB();
	for(let i = 0; i < data.length; i += 4) {
		let r = data[i];
		let g = data[i + 1];
		let b = data[i + 2];
		data[i] = Math.min(Math.round(r1 * r + g1 * g + b1 * b), 255);
		data[i + 1] = Math.min(Math.round(r2 * r + g2 * g + b2 * b), 2);
		data[i + 2] = Math.min(Math.round(r3 * r + g3 * g + b3 * b), 2);
	}
	var newImageData = contrastImage(imageData, 100);
	ctx.putImageData(imageData, 0, 0);
}

function applyBruh() {
	const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
	const data = imageData.data;
	const [r1, g1, b1] = randomRGB();
	const [r2, g2, b2] = randomRGB();
	const [r3, g3, b3] = randomRGB();
	for(let i = 0; i < data.length; i += 4) {
		let r = data[i];
		let g = data[i + 1];
		let b = data[i + 2];
		data[i] = Math.min(Math.round(r1 * r + g1 * g + b1 * b), 225);
		data[i + 1] = Math.min(Math.round(r2 * r + g2 * g + b2 * b), 185);
		data[i + 2] = Math.min(Math.round(r3 * r + g3 * g + b3 * b), 105);
	}
	var newImageData = contrastImage(imageData, 100);
	ctx.putImageData(imageData, 0, 0);
}

function applyCute() {
	const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
	const data = imageData.data;
	const [r1, g1, b1] = randomRGB();
	const [r2, g2, b2] = randomRGB();
	const [r3, g3, b3] = randomRGB();
	for(let i = 0; i < data.length; i += 4) {
		let r = data[i];
		let g = data[i + 1];
		let b = data[i + 2];
		data[i] = Math.min(Math.round(r1 * r + g1 * g + b1 * b), 225);
		data[i + 1] = Math.min(Math.round(r2 * r + g2 * g + b2 * b), 95);
		data[i + 2] = Math.min(Math.round(r3 * r + g3 * g + b3 * b), 155);
	}
	var newImageData = contrastImage(imageData, 100);
	ctx.putImageData(imageData, 0, 0);
}

function randomRGB() {
	let r = Math.random();
	let g = Math.random();
	let b = Math.random();
	const sum = r + g + b;
	r /= sum;
	g /= sum;
	b /= sum;
	return [r, g, b];
}

function applyRNG() {
	const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
	const data = imageData.data;
	const [r1, g1, b1] = randomRGB();
	const [r2, g2, b2] = randomRGB();
	const [r3, g3, b3] = randomRGB();
	for(let i = 0; i < data.length; i += 4) {
		let r = data[i];
		let g = data[i + 1];
		let b = data[i + 2];
		data[i] = Math.min(Math.round(r1 * r + g1 * g + b1 * b), 255);
		data[i + 1] = Math.min(Math.round(r2 * r + g2 * g + b2 * b), 255);
		data[i + 2] = Math.min(Math.round(r3 * r + g3 * g + b3 * b), 255);
	}
	var newImageData = contrastImage(imageData, 100);
	ctx.putImageData(imageData, 0, 0);
}

function applyNoise() {
	const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
	const data = imageData.data;
	for(let i = 0; i < data.length; i += 4) {
		let r = data[i], // red
			g = data[i + 1], // green
			b = data[i + 2]; // blue
		data[i] = Math.min(Math.round(0.572 * r + 0.134 * g + 0.131 * b), Math.random() * 255);
		data[i + 1] = Math.min(Math.round(0.172 * r + 0.534 * g + 0.131 * b), 155);
		data[i + 2] = Math.min(Math.round(0.272 * r + 0.134 * g + 0.531 * b), 155);
	}
	ctx.putImageData(imageData, 0, 0);
}
const BlastBtn = document.getElementById('BlastBtn');
BlastBtn.addEventListener('click', () => {
	ctx.filter = "saturate(200%)";
	ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
});
const resetBtn = document.getElementById('resetBtn');
resetBtn.addEventListener('click', () => {
	ctx.filter = "saturate(100%)";
	ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
});
// fill the canvas using the pattern
function draw() {
	ctx.clearRect(0, 0, viewWidth, viewHeight);
	ctx.fillStyle = ctx.createPattern(patternCanvas, 'repeat');
	ctx.fillRect(0, 0, viewWidth, viewHeight);
}

function downloadImage() {
	const link = document.createElement("a");
	link.download = "edited-photo.png";
	link.href = canvas.toDataURL("image/png");
	link.click();
}