import { memo, useCallback, useState } from 'react';
import { getMouseData, type MouseData } from '~/lib/replay/Recording';

interface PointSelectorProps {
  isSelectionMode: boolean;
  setIsSelectionMode: (mode: boolean) => void;
  selectionPoint: { x: number; y: number } | null;
  setSelectionPoint: (point: { x: number; y: number } | null) => void;
  containerRef: React.RefObject<HTMLIFrameElement>;
}

let gCurrentMouseData: MouseData | undefined;

export function getCurrentMouseData() {
  return gCurrentMouseData;
}

export const PointSelector = memo(
  (props: PointSelectorProps) => {
    const {
      isSelectionMode,
      setIsSelectionMode,
      selectionPoint,
      setSelectionPoint,
      containerRef,
    } = props;

    const [isCapturing, setIsCapturing] = useState(false);
    const [mouseData, setMouseData] = useState<MouseData | undefined>(undefined);

    gCurrentMouseData = mouseData;

    const handleSelectionClick = useCallback(async (event: React.MouseEvent) => {
      event.preventDefault();
      event.stopPropagation();

      if (!isSelectionMode || !containerRef.current) {
        return;
      }

      const rect = event.currentTarget.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;
      setSelectionPoint({ x, y });
 
      setIsCapturing(true);

      const mouseData = await getMouseData(containerRef.current, { x, y });
      console.log("MouseData", mouseData);
      setMouseData(mouseData);

      setIsCapturing(false);
      setIsSelectionMode(false); // Turn off selection mode after capture
    }, [isSelectionMode, containerRef, setIsSelectionMode]);

    if (!isSelectionMode) {
      if (selectionPoint) {
        // Draw an overlay to prevent interactions with the iframe
        // and to show the last point the user clicked.
        return (
          <div
            className="absolute inset-0"
            onClick={(event) => event.preventDefault()}
          >
            <div
              style={{
                position: 'absolute',
                left: `${selectionPoint.x-8}px`,
                top: `${selectionPoint.y-12}px`,
              }}
            >
              &#10060;
            </div>
          </div>
        );
      } else {
        return null;
      }
    }

    return (
      <div
        className="absolute inset-0"
        onClick={handleSelectionClick}
        style={{
          backgroundColor: isCapturing ? 'transparent' : 'rgba(0, 0, 0, 0.1)',
          userSelect: 'none',
          WebkitUserSelect: 'none',
          pointerEvents: 'all',
          opacity: isCapturing ? 0 : 1,
          zIndex: 50,
          transition: 'opacity 0.1s ease-in-out',
        }}
      >
      </div>
    );
  },
);