import { useEffect } from 'react';
import { useAppDispatch } from '../hooks';
import { setMousePosition } from '../mousePosition/mousePositionSlice';

export const useMousePosition = () => {
  const dispatch = useAppDispatch();

  useEffect(() => {
    // Handler to dispatch mouse position
    //const handleMousePosition = (e: React.ChangeEvent<HTMLInputElement>) => {
    const handleMousePosition = (e: MouseEvent) => {
      dispatch(
        setMousePosition({
          x: e.clientX, //pageX?
          y: e.clientY, //pageY?
        })
      );
    };

    // Set initial size on mount
    //handleMousePosition();

    // Add resize event listener
    window.addEventListener('mousemove', handleMousePosition);

    // Cleanup on unmount
    return () => window.removeEventListener('mousemove', handleMousePosition);
  }, [dispatch]);
};