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

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

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

  var top = image_height / 2 - yOffset - 175 - 5;
  if (top > 0) top = 0;

  var bottom = -(image_height / 2) - yOffset + 5 + 175;
  if (bottom < 0) bottom = 0;

  var left = image_width / 2 - xOffset - 175 - 5;
  if (left > 0) left = 0;

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

function calculateBoxBoundsOnImage(offsets) {
  const x_overspill = image_width - 360;
  const left_overspill = x_overspill / 2 - offsets.x;

  const y_overspill = image_height - 360;
  const top_overspill = y_overspill / 2 - offsets.y;

  return {
    left: left_overspill,
    right: left_overspill + 360,
    top: top_overspill,
    bottom: top_overspill + 360,
  };
}

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

  offsets = calculateOffsets();

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

  image_dark_overlay.style.setProperty("--x-offset", offsets.x + "px");
  image_dark_overlay.style.setProperty("--y-offset", offsets.y + "px");

  bounds = calculateBoxBoundsOnImage(offsets);
  image_dark_overlay.style.setProperty("--left-edge", bounds.left + "px");
  image_dark_overlay.style.setProperty("--right-edge", bounds.right + "px");

  image_dark_overlay.style.setProperty("--top-edge", bounds.top + "px");
  image_dark_overlay.style.setProperty("--bottom-edge", bounds.bottom + "px");
});

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

let unclickedMouse = false;
resize_photo_box.addEventListener("mouseup", () => {
  if (!unclickedMouse) return;
  unclickedMouse = false;
  offsets = calculateOffsets();

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

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

// handle anchors
resize_anchors = document.getElementsByClassName("resize_anchor");
var handleBeingHeld = [false, false, false, false];
var startX, startY;
for (var i = 0; i < resize_anchors.length; i++) {
  const index = i;
  resize_anchors[index].addEventListener("mousedown", (e) => {
    e.stopPropagation();
    handleBeingHeld[index] = true;
    startX = currentX;
    startY = currentY;
  });

  document.body.addEventListener("mouseup", () => {
    handleBeingHeld[index] = false;
    resize_anchors[index].style.setProperty("--x-offset", "0px");
    resize_anchors[index].style.setProperty("--y-offset", "0px");
    resize_photo_box.style.setProperty("--size", "350px");
    resize_photo_box.style.setProperty("--box-x-offset", "0px");
    resize_photo_box.style.setProperty("--box-y-offset", "0px");
  });

  resize_anchors[i].style.setProperty("--x-offset", "0px");
  resize_anchors[i].style.setProperty("--y-offset", "0px");
}

document.body.addEventListener("mousemove", () => {
  for (var i = 0; i < handleBeingHeld.length; i++) {
    if (!handleBeingHeld[i]) continue;

    newX = Math.abs(startX - currentX);
    newY = Math.abs(currentY - startY);

    moveAmount = max(min(newX, newY), 0);

    resize_anchors[i].style.setProperty("--x-offset", moveAmount + "px");
    resize_anchors[i].style.setProperty("--y-offset", moveAmount + "px");
    resize_photo_box.style.setProperty("--size", 350 - moveAmount + "px");

    if (i == 0) {
      resize_photo_box.style.setProperty("--box-x-offset", moveAmount + "px");
      resize_photo_box.style.setProperty("--box-y-offset", moveAmount + "px");
    }
    if (i == 1) {
      resize_photo_box.style.setProperty("--box-y-offset", moveAmount + "px");
    }
    if (i == 2) {
      resize_photo_box.style.setProperty("--box-x-offset", moveAmount + "px");
    }
  }
});