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

//   // Initialize position with default values
//   let position: {
//     top: number | "auto";
//     left: number | "auto";
//     right: number | "auto";
//     bottom: number | "auto";
//   };

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

//   return position;
// }



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;
}