<script lang="ts">
	import { onMount } from 'svelte';
  // rename to PotatoCanvas?

	let canvas;
  // let img;
  let loaded = false;
// i feel like they told me not to do this, new Image(), isn't there another way?
  // never mind they do seem to do this shit...
  // no idea if this should be in onMount...
  const img = new Image();
  img.src = 'img/potato_logo.png';
  img.onload = () => {
    loaded = true;
    // not sure if i'll use this...
  }

  // $: scaleRatio = window.innerWidth / 10;
  $: scaleRatio = 30;
  $: nPotoatoRows = Math.floor(window.innerHeight / 200);
  $: nPotoatoCols = Math.floor(window.innerWidth / 200);
  // $: spacing = (canvas.height - (img.height / scaleRatio * (nPotoatoRows - 1) )) / nPotoatoRows;


  // apparently i might need to move all my reactive statements outside the onMount... not sure why...



  onMount(() => {

    // in this on mount we will set the canvas and the img

		const ctx = canvas.getContext('2d');
		// let frame = requestAnimationFrame(loop);
    ctx.width = window.innerWidth;
    ctx.height = window.innerHeight;

    // console.log(nPotoatoCols);

    // img = fetch('img/potato_logo.png');

    // Moving the IMG stuff from her out of mount

    // let nPotoatoRows = 4;
    // $: nPotoatoRows = Math.floor(canvas.height / 200);
    let spacing = (canvas.height - (img.height / scaleRatio * (nPotoatoRows - 1) )) / nPotoatoRows;
    // $: spacing = (canvas.height - (img.height / scaleRatio * (nPotoatoRows - 1) )) / nPotoatoRows;
    // i prolly need a number of potatos X and Y vars



    // i could do it so there are more potatos than can fit on the screen, translate them over, and then after some point
    // shift them all back to the next position they would be in, so it looks like they keep going to infinity

    // let dx = 1.5;
    let dx = 1;
    // let dy = -0.5;
    let dy = -1;
    // let startX = spacing;
    // let startY = spacing;
    // let startX = 0;
    // let startY = 0;
    let startX = -(spacing * 2.5);
    let startY = -(spacing * 2.5);
    let x = startX;
    let y = startY;

    let frame = requestAnimationFrame(loop);
    // i don't think i need t...
		function loop(t) {
      // yea ok a loop in a loop in a loop, horrible idea...
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      // this has to be at the end, no?
      frame = requestAnimationFrame(loop);
      // if (x > 900) {
      //   x = startX;
      //   y = startY;
      // }
      // else {
      //   x += dx;
      //   y += dy;
      // }

      for (let i = 0; i < 20; i++) {
        for (let j = 0; j < 10; j++) {
          // ctx.drawImage(img, x + (i * spacing * 2), y + (j * spacing), img.width / scaleRatio, img.height / scaleRatio);
          ctx.drawImage(img, x + (i * spacing), y + (j * spacing), img.width / scaleRatio, img.height / scaleRatio);
        }
      }

		}

		return () => {
			cancelAnimationFrame(frame);
		};
	});

</script>

<canvas
	bind:this={canvas}
	width={window.innerWidth}
	height={window.innerHeight}
></canvas>

<style>
	canvas {
		width: 100%;
		height: 100%;
		background-color: #666;
	}
</style>
