<!-- <script lang="ts"> -->
<script>
	import { onMount } from 'svelte';

	let canvas;

  // $: scaleRatio = window.innerWidth / 10;
  $: scaleRatio = 30;

	onMount(() => {
    // we're invoking JS methods of the canvas element
		const ctx = canvas.getContext('2d');

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

    // ctx.beginPath();
    // ctx.moveTo(50,50);
    // ctx.lineTo(70,70);
    // ctx.stroke();

    // attempting to import an image
    const img = new Image();
    // we may have to call an onMount or something to make sure the image has loaded...
    // doing it in JS for now, ideally in Svelte later..
    // img.addEventListener('load', () => {
    //   // execute drawImage statements here
    // }, false);
    img.src = 'img/potato_logo.png';  // seems like this does need to be above onload()
    img.onload = () => {
      // ctx.drawImage(img, 0, 0, img.width * (ctx.width / 15), img.height * (ctx.height / 15));
      // ctx.drawImage(img, 0, 0, ctx.width / 15, ctx.height / 15);

    // i think i don't want this cuz it'll get in the way?
    //  ctx.drawImage(img, 0, 0, img.width / scaleRatio, img.height / scaleRatio);

      // it would seem you need to redraw the images when you change the Window size, it's not automatically responsive
    };

    let startX = 200;
    let startY = 200;
    let dx = 3;
    let dy = -1;

  // Time for some math
  // lets say i want 6 rows 
  // ok so we're gonna draw all the potatos at the same time and each of them gets animated, like i have it now
  // 6 in a row so # of rows aka x = width * 6/height

    function Potato(x, y) {
      this.x = x;
      this.y = y;
      // ctx.drawImage(img, x, y, img.width / scaleRatio, img.height / scaleRatio);

      this.draw = function() {
        ctx.drawImage(img, x, y, img.width / scaleRatio, img.height / scaleRatio);
      }

      this.animate = function() {
        this.x += dx;
        this.y += dy;

        this.draw();
      }
    }

    // let spacing = canvas.width * ((6 + 1) / canvas.height);
    let spacing = 70;
    let Potatos = [];
    //check the math...
    // for (let i = 0; i <  6 * spacing; i++) {
    for (let i = 0; i < 2; i++) {
      // for (let j = 0; j < 6; j++) {
      for (let j = 0; i < 2; j++) {
        Potatos.push(new Potato(spacing + (i * spacing), spacing + (j * spacing)));
      }
    }


    // now i'm trying to move 1 potato
    let frame = requestAnimationFrame(loop);
    // function loop(t) {
    //   ctx.clearRect(0, 0, canvas.width, canvas.height);
    //   frame = requestAnimationFrame(loop);
    //   ctx.drawImage(img, startX, startY, img.width / scaleRatio, img.height / scaleRatio);
    //   startX += dx;
    //   startY += dy;
    // }

      // new Potato(70, 70).animate();


    function loop(t) {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      frame = requestAnimationFrame(loop);
      for (let i = 0; i < Potatos.length; i++) {
        Potatos[i].animate();
      }
      // Potatos[0].animate();
    }

    loop();

// Lets try again with a single loop




// THis shit makes the cool Gradient
    // let frame = requestAnimationFrame(loop);
		// function loop(t) {
		// 	frame = requestAnimationFrame(loop);

		// 	// const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

		// 	for (let p = 0; p < imageData.data.length; p += 4) {
		// 		const i = p / 4;
		// 		const x = i % canvas.width;
		// 		const y = i / canvas.width >>> 0;

		// 		const r = 64 + (128 * x / canvas.width) + (64 * Math.sin(t / 1000));
		// 		const g = 64 + (128 * y / canvas.height) + (64 * Math.cos(t / 1000));
		// 		const b = 128;

		// 		imageData.data[p + 0] = r;
		// 		imageData.data[p + 1] = g;
		// 		imageData.data[p + 2] = b;
		// 		imageData.data[p + 3] = 255;
		// 	}

		// 	ctx.putImageData(imageData, 0, 0);
		// }

		return () => {
			cancelAnimationFrame(frame);
      // prolly something else...
		};
	});
</script>

<canvas
	bind:this={canvas}
	width={window.innerWidth}
	height={window.innerHeight}
></canvas>
<!-- widht and height were 32, trying stuff -->

<!-- I don't have the /svelte-logo-mask.svg, i guess i'll go get something -->
<style>
	canvas {
		width: 100%;
		height: 100%;
		background-color: #666;


    /* testing something */
    /* -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
    mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%); */
    /* Holy shit that worked! i got a mask */
    /* it also works without a mask! i have a canvas! */

		/* -webkit-mask: url(/svelte-logo-mask.svg) 50% 50% no-repeat; */
    /* -webkit-mask: url(img/cartoon_potato3.jpg) 50% 50% no-repeat; */
		/* mask: url(/svelte-logo-mask.svg) 50% 50% no-repeat; */
		/* mask: url(img/cartoon_potato3.jpg) 50% 50% no-repeat; */
	}
</style>
