import { useEffect, useState } from 'react';

export interface CursorState {
    screenX: number;
    screenY: number;
    clientX: number;
    clientY: number;
    pageX: number;
    pageY: number;
}

const initState: CursorState = {
    screenX: NaN,
    screenY: NaN,
    clientX: NaN,
    clientY: NaN,
    pageX: NaN,
    pageY: NaN,
};

export default () => {
    const [state, setState] = useState(initState);

    useEffect(() => {
        const moveHandler = (event: MouseEvent) => {
            const { screenX, screenY, clientX, clientY, pageX, pageY } = event;
            setState({ screenX, screenY, clientX, clientY, pageX, pageY });
        };
        document.addEventListener('mousemove', moveHandler);
        return () => {
            document.removeEventListener('mousemove', moveHandler);
        };
    }, []);

    return state;
};