import p5 from "p5";
import io from "socket.io-client";
const socket = io("http://localhost:3000");

const params = {
  fps: 60,
  zoom: 0.01,
  backgroundTicks: 60,
  textSpread: 0,
  maxSpawns: 1,
  textAlpha: 0.0,
  textTicks: 1,
};

socket.on("paramUpdate", ({ key, value }) => {
  params[key] = value;
  console.log(`Updated param ${key} to ${value}`);
});

let bg;
let cw = 1;
let ch = 1;

const poem =
  "everybody is pretty ugly \
lover \
you are my mirror \
I can't judge this \
predicament \
autism alienation and sitting beach \
this depression's a symptom but it's disease too \
spaces \
interiors in berlin city reach peach intention lover drag sleepless depth fear dirt lone";
const realText = poem.split(" ").filter((t) => t.length > 0);

const sketch = (p) => {
  let sobel;
  p.setup = async () => {
    // bg = await p.loadImage("assets/scans/1200dpi 16bit grayscale.png");
    bg = await p.loadImage("assets/scans/portable.png");
    p.createCanvas(p.windowWidth, p.windowHeight, p.WEBGL);
    sobel = p.createFilterShader(`
      precision highp float;

  // x,y coordinates, given from the vertex shader
  varying vec2 vTexCoord;

  // the canvas contents, given from filter()
  uniform sampler2D tex0;
  // other useful information from the canvas
  uniform vec2 texelSize;
  uniform vec2 canvasSize;
  // a custom variable from this sketch
  uniform float pulse;

  void main() {
    // get the color at current pixel
    vec4 color = texture2D(tex0, vTexCoord);
    // set the output color
    color.b = 1.0;
    color *= pulse;
    gl_FragColor = vec4(color.rgb, 1.0);
  }`);
    // const stream = c.elt.captureStream(60);
  };

  let bgTick = 0;
  let textTick = 0;
  let sx, sy;
  let word, bounds;

  p.draw = () => {
    p.background(220);
    // update scale
    p.setFrameRate(params.fps);

    bgTick %= params.backgroundTicks;
    if (bgTick++ == 0) {
      cw = Math.floor(bg.width * params.zoom);
      ch = Math.floor(bg.height * params.zoom);

      sx = Math.random(0) * (bg.width - cw);
      sy = Math.random(0) * (bg.height - ch);
    }

    textTick %= params.textTicks;
    if (textTick++ == 0) {
      (word, (bounds = nextText()));
    }

    p.image(bg, 0, 0, p.windowWidth, p.windowHeight, sx, sy, cw, ch);
    if (word && bounds) drawText(word, bounds);
    sobel.setUniform("pulse", 0.5);
    p.filter(sobel);
  };

  function nextText() {
    for (let i = 0; i < Math.random() * params.maxSpawns; i++) {
      const word = realText[Math.floor(Math.random() * realText.length)];
      const wx =
        p.windowWidth / 2 -
        p.textWidth(word) / 2 +
        p.random(-params.textSpread, params.textSpread);
      const wy =
        p.windowHeight / 2 -
        p.textAscent() / 2 +
        p.random(-params.textSpread, params.textSpread);
      const bounds = p.textBounds(word, wx, wy);
      return { word, bounds };
    }
  }

  function drawText(word, bounds) {
    const whitespace = 2;
    p.stroke(0, 0, 0, params.textAlpha);
    p.fill(255, 255, 255, params.textAlpha);
    p.rect(
      bounds.x - whitespace,
      bounds.y - whitespace,
      bounds.w + 2 * whitespace,
      bounds.h + 2 * whitespace,
    );

    p.noStroke();
    p.fill(0, 0, 0, params.textAlpha);
    p.text(word, bounds.x, bounds.y + p.textAscent());
  }
};

new p5(sketch);