const resize_photo_box = document.getElementById("resize_photo_box");

// Drag handling
var startXOffset = 0,
  startYOffset = 0;

function calculateOffsets() {
  const yOffset = startYOffset + (currentY - y_start);
  const xOffset = startXOffset + (currentX - x_start);

  var top = bitmap.height / 2 - yOffset - 175;
  if (top > 0) top = 0;

  var bottom = -(bitmap.height / 2) - yOffset + 10 + 175;
  if (bottom < 0) bottom = 0;

  var left = bitmap.width / 2 - xOffset - 175;
  if (left > 0) left = 0;

  var right = -(bitmap.width / 2) - xOffset + 10 + 175;
  if (right < 0) right = 0;
  return { x: xOffset + left + right, y: yOffset + top + bottom };
}

var mouseClicked = false;
resize_photo_box.addEventListener("mousemove", () => {
  if (!mouseClicked) return;

  offsets = calculateOffsets();

  y_top = new_profile_image.style.setProperty("--x-offset", offsets.x + "px");
  new_profile_image.style.setProperty("--y-offset", offsets.y + "px");
});

resize_photo_box.addEventListener("mousedown", () => {
  x_start = currentX;
  y_start = currentY;
  mouseClicked = true;
  set_cursor_state(CURSOR_GRABBING);
});

resize_photo_box.addEventListener("mouseup", () => {
  offsets = calculateOffsets();

  startXOffset = offsets.x;
  startYOffset = offsets.y;
});

document.body.addEventListener("mouseup", () => {
  mouseClicked = false;
  set_cursor_state(CURSOR_NORMAL);
});