import { IPoint } from "@fullstackcraftllc/codevideo-types";
import { convertToContainerCoordinates } from "./convertToContainerCoordinates";
import { DEFAULT_MOUSE_POSITION } from "src/constants/CodeVideoIDEConstants";

export const getCoordinatesByCodeVideoDataID = (dataId: string, containerRef: React.RefObject<HTMLDivElement | null>): IPoint => {
    if (!containerRef) return DEFAULT_MOUSE_POSITION;
    const element = document.querySelector(`[data-codevideo-id="${dataId}"]`);
    if (!element) {
        console.warn('element with data-codevideo-id not found', dataId);
        return DEFAULT_MOUSE_POSITION;
    }
    console.log(`Looking for element with data-codevideo-id=${dataId}, found:`, element);
    const rect = element.getBoundingClientRect();
    const x = rect.left + rect.width / 2;
    const y = rect.top + rect.height / 2;
    console.log(`Center of element found at: ${x}, ${y}`);
    return convertToContainerCoordinates({
        x,
        y
    }, containerRef);
};