export function determinePosition(
  canvasRect: DOMRect,
  relativeX: number,
  relativeY: number
): {
  top: number | "auto";
  left: number | "auto";
  right: number | "auto";
  bottom: number | "auto";
} {
  const centerX = canvasRect.width / 2;
  const centerY = canvasRect.height / 2;

  let position: {
    top: number | "auto";
    left: number | "auto";
    right: number | "auto";
    bottom: number | "auto";
  };

  if (relativeY < centerY) {
    if (relativeX < centerX) {
      console.log("Top-left");
      position = {
        top: relativeY,
        left: relativeX,
        right: "auto",
        bottom: "auto",
      };
    } else {
      console.log("Top-right");
      position = {
        top: relativeY,
        right: canvasRect.width - relativeX,
        left: "auto",
        bottom: "auto",
      };
    }
  } else {
    if (relativeX < centerX) {
      console.log("Bottom-left");
      position = {
        bottom: canvasRect.height - relativeY,
        left: relativeX,
        right: "auto",
        top: "auto",
      };
    } else {
      console.log("Bottom-right");
      position = {
        bottom: canvasRect.height - relativeY,
        right: canvasRect.width - relativeX,
        left: "auto",
        top: "auto",
      };
    }
  }

  return position;
}