let isMobile = false;
// variables
let invert = false;
let currentX = 0;
let currentY = 0;
let clicks = 0;
let userInteraction = false;
let width = 0;
let height = 0;

// colors
const black = [255, 0, 0, 255];
const white = [255, 255, 255, 255];
let currentColor = white;
let otherColor = black;

// sketch parameters
const maxRepeatCountX = 2;
const maxRepeatCountY = 2;
const sketchCount = 4;
const sketchID = Math.floor(Math.random() * sketchCount);

// recording
let timerTimeout = 3; // in seconds
let timer = 0;
let recording = []; // array of objects with time, x, y properties
let recording_index = 0; // index for the recording array
 height = window.innerHeight;
 width = window.innerWidth;
 currentX = width / 2;
 currentY = height / 2;

console.log('Width:', width, 'Height:', height);

let repeatsX = Math.floor(Math.random() * maxRepeatCountX) + 1;
let repeatsY = Math.floor(Math.random() * maxRepeatCountY) + 1;

p.setup = () => {
  p.createCanvas(width, height, p.P2D);
  p.background(white);
  p.noFill();
  timerTimeout *= p.getTargetFrameRate();
  p.strokeWeight(3);
};

p.draw = () => {
  // feedback loop
  let c = p.get();
  // p.clear();
  p.image(
    c,
    (currentX - width / 2) / 10,
    (currentY - height / 2) / 10,
    width - (1 / 2 - currentX / width) * 30,
    height - (1 / 2 - currentY / height) * 30
  );

  // recording countdown
  timer -= 1;
  if (timer < 0) {
    userInteraction = false;
  }
  if (!userInteraction) {
    if (isMobile) {
      currentX = Math.sin(p.frameCount / 10) * 30 + width / 1.9;
      currentY = height / 2.2;
    } else {
      // play the mouse recording
      if (recording.length > 0) {
        // let currentRecord = recording.shift();
        let currentRecord = recording[recording_index % recording.length];
        if (currentRecord) {
          currentX = currentRecord.x;
          currentY = currentRecord.y;
        }
      }
      recording_index++;
    }
  }

  // TODO update pls

  if (sketchID == 0) {
    // rectangle
    for (let i = 0; i < repeatsX; i++) {
      for (let j = 0; j < repeatsY; j++) {
        let xOffset = (width / repeatsX) * i + width / (repeatsX * repeatsX);
        let yOffset = (height / repeatsY) * j + height / (repeatsY * repeatsY);
        p.rect(xOffset, yOffset, width / 3 - i * 20, height / 3 - j * 20);
      }
    }
  } else if (sketchID == 1) {
    // o
    p.ellipse(width / 2, height / 2, width / 3, height / 3);
  } else if (sketchID == 2) {
    // |
    p.line(width / 2, height / 2 - height / 6, width / 2, height / 2 + height / 6);
  } else if (sketchID == 3) {
    // X
    p.line(
      width / 2 - width / 6,
      height / 2 - height / 6,
      width / 2 + width / 6,
      height / 2 + height / 6
    );
    p.line(
      width / 2 + width / 6,
      height / 2 - height / 6,
      width / 2 - width / 6,
      height / 2 + height / 6
    );
  } else if (sketchID == 4) {
    // .
    p.point(width / 2, height / 2);
  }

  // inversion effect
  if (invert) {
    p.filter(p.INVERT);
    invert = false;
    let tempColor = currentColor;
    currentColor = otherColor;
    otherColor = tempColor;
  }
};

p.mousePressed = () => {
  invert = !invert;
  clicks++;
};

p.mouseMoved = () => {
  // delete previous recording and start a new one
  if (!userInteraction) {
    recording = [];
  }
  userInteraction = true;
  timer = timerTimeout;

  currentX = p.mouseX;
  currentY = p.mouseY;

  // record when mouse is moving not very accurate though (no timestamp)
  if (!isMobile) {
    recording.push({
      x: currentX,
      y: currentY
    });
  }
};