var angle_arr = [];
function closest(val){
	x= angle_arr.reduce(function(prev, cur) {
		return Math.abs(cur.angle - val) < Math.abs(prev.angle - val) ? cur : prev;
	});
	return x;
}
window.onload = function() {
	fetch('js/angles.json').then((response)=>response.json()).then((json)=>angle_arr=json.angles);
    	var input = document.getElementById('fileUpload');
	input.addEventListener('change', handleFiles);
	rotation.addEventListener("input", (event) => {
		var closestAngle = closest(event.target.value);
		console.log(closestAngle);
		event.target.value = closestAngle.angle;
            	angle.textContent = event.target.value;
		tileImg(closestAngle.angle);
	})
	canvas.width = 700;
	canvas.height = 700;


}
var img = new Image;
function handleFiles(e) {
	img.onload = tileImg;
	img.src = URL.createObjectURL(e.target.files[0]);

}

function tileImg(a) {
	var ctx = document.getElementById('canvas').getContext('2d');
var image = img;
  // Set the angle in radians
  const angleDeg = a; // Replace with your desired angle in degrees
  const angle = angleDeg * Math.PI / 180;
  // Create a temporary canvas
  var tempCanvas = document.createElement ("canvas");
  var tempCtx = tempCanvas.getContext ("2d");

  // Calculate the diagonal length of the original canvas
  var d = Math.sqrt (canvas.width * canvas.width + canvas.height * canvas.height);

  // Set the temporary canvas dimensions to the diagonal length
  tempCanvas.width = d;
  tempCanvas.height = d;

  // Create the pattern on the temporary context
  var pattern = tempCtx.createPattern (image, "repeat");

  // Set the fill style on the temporary context
  tempCtx.fillStyle = pattern;

  // Save the temporary context state
  tempCtx.save ();

  // Translate to the center of the temporary canvas
  tempCtx.translate (d / 2, d / 2);

  // Rotate by the angle
  tempCtx.rotate (angle);

  // Draw the rectangle with the pattern on the temporary context
  tempCtx.fillRect (-d / 2, -d / 2, d, d);

  // Restore the temporary context state
  tempCtx.restore ();

  // Draw the temporary canvas on the original canvas
  ctx.drawImage (tempCanvas, - (d - canvas.width) / 2, - (d - canvas.height) / 2);
  

}