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;

  // Define a threshold for considering a point as "centered"
  const centerThreshold = 10; // Adjust this value as needed

  // Check if the point is within the center threshold
  const isCenterX = Math.abs(relativeX - centerX) <= centerThreshold;
  const isCenterY = Math.abs(relativeY - centerY) <= centerThreshold;

  // If the point is centered, return a special "centered" position
  if (isCenterX && isCenterY) {
    return {
      top: "auto",
      left: "auto",
      right: "auto",
      bottom: "auto",
    };
  }

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

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

  return position;
}