const minusb1 = document.getElementById("minus1");
const plusb1 = document.getElementById("plus1");
const text1 = document.getElementById("text1");
const num1 = document.getElementById("num1");
let x = 0;
const minusb2 = document.getElementById("minus2");
const plusb2 = document.getElementById("plus2");
const text2 = document.getElementById("text2");
const num2 = document.getElementById("num2");
let y = 0;
const minusb3 = document.getElementById("minus3");
const plusb3 = document.getElementById("plus3");
const text3 = document.getElementById("text3");
const num3 = document.getElementById("num3");
let z = 0;
document.getElementById("zero").addEventListener("click", (e) => {
  x = 0;
  y = 0;
  z = 0;
  onUpdate();
});

const evf = (str) => {
  try {
    if (typeof eval("()=>" + str) === "function") {
      return eval("()=>" + str);
    }
  } catch (e) {}
};
const del = (f, eps) => {
  const base = f();
  x += eps;
  const xd = f();
  x -= eps;
  y += eps;
  const yd = f();
  y -= eps;
  z += eps;
  const zd = f();
  z -= eps;
  return [(xd - base) / eps, (yd - base) / eps, (zd - base) / eps];
};

const onUpdate = () => {
  const xv = evf(text1.value) !== undefined ? evf(text1.value)() : x;
  const yv = evf(text2.value) !== undefined ? evf(text2.value)() : y;
  const zv = evf(text3.value) !== undefined ? evf(text3.value)() : z;
  num1.textContent = xv.toFixed(1);
  num2.textContent = yv.toFixed(1);
  num3.textContent = zv.toFixed(1);

  document.getElementById("mover").style.transform = `translate(${xv * 10}px, ${
    yv * 10
  }px) scale(${zv + 1})`;
};
onUpdate();

const clickThing = (val, amt) => {
  if (evf(val) !== undefined) {
    // slope of efv in x, y, and z directions
    const [xd, yd, zd] = del(evf(val), amt); //using amt here assumes evf has a slope of 1??? lol
    // if reaching a local maxima / minima BAD roughly
    // if (Math.abs(xd) < 0.05 && Math.abs(yd) < 0.05 && Math.abs(zd) < 0.05)
    //    return
    // want nx*xd + ny*yd + nz*zd = 1
    const sum = xd + yd + zd;
    const [normxd, normyd, normzd] = [xd / sum, yd / sum, zd / sum];
    // want n = c*norm
    const sum2 = normxd * xd + normyd * yd + normzd * zd;
    const nx = normxd / sum2;
    const ny = normyd / sum2;
    const nz = normzd / sum2;
    // TODO: make this iterative
    // so it works for non-linear stuff
    x += nx * amt;
    y += ny * amt;
    z += nz * amt;
    onUpdate();
    return true;
  }
  return false;
};

minusb1.addEventListener("click", () => {
  if (!clickThing(text1.value, -0.01)) {
    x -= 0.01;
    onUpdate();
  }
});
plusb1.addEventListener("click", () => {
  if (!clickThing(text1.value, 0.01)) {
    x += 0.01;
    onUpdate();
  }
});
minusb2.addEventListener("click", () => {
  if (!clickThing(text2.value, -0.01)) {
    y -= 0.01;
    onUpdate();
  }
});
plusb2.addEventListener("click", () => {
  if (!clickThing(text2.value, 0.01)) {
    y += 0.01;
    onUpdate();
  }
});
minusb3.addEventListener("click", () => {
  if (!clickThing(text3.value, -0.01)) {
    z -= 0.01;
    onUpdate();
  }
});
plusb3.addEventListener("click", () => {
  if (!clickThing(text3.value, 0.01)) {
    z += 0.01;
    onUpdate();
  }
});

text1.addEventListener("input", onUpdate);
text2.addEventListener("input", onUpdate);
text3.addEventListener("input", onUpdate);

// scrubbing
let scrubbing = null;
num1.addEventListener("mousedown", (e) => {
  scrubbing = 1;
});
num2.addEventListener("mousedown", (e) => {
  scrubbing = 2;
});
num3.addEventListener("mousedown", (e) => {
  scrubbing = 3;
});
document.addEventListener("mouseup", (e) => {
  scrubbing = null;
});
let prevMouseX = 0;
document.addEventListener("mousemove", (e) => {
  const mouseX = e.x;
  const diff = (mouseX - prevMouseX) / 10;
  prevMouseX = mouseX;
  if (diff === 0) return;
  if (scrubbing === 1) {
    if (!clickThing(text1.value, diff)) {
      x += diff;
      onUpdate();
    }
  }
  if (scrubbing === 2) {
    if (!clickThing(text2.value, diff)) {
      y += diff;
      onUpdate();
    }
  }
  if (scrubbing === 3) {
    if (!clickThing(text3.value, diff)) {
      z += diff;
      onUpdate();
    }
  }
});