import { useEffect, useRef, useState } from 'react';

/**
 * Reports real time position of mouse
 * @param {number} delay specifies for how long to wait before mouse is considered not moving (default 3000)
 * @returns {Object} current mouse oordinates
 */
export default function useMouse(delay) {
    const [coords, setCoords] = useState([0, 0]);
    const [isMoving, setIsMoving] = useState(false);

    let timer;
    // Create a ref that stores handler
    const savedHandler = useRef();
    const eventName = 'mousemove';
    const element = global;
    const handler = mouseMoving;
    const defaultDelay = 3000;

    /**
     * Handler for mouse moving
     * @param {any} event the event
     */
    function mouseMoving(event: any) {
        if (timer) {
            clearTimeout(timer);
        }
        // eslint-disable-next-line no-console
        console.log(isMoving);
        // Set new mouse coordinates
        setCoords([event.clientX, event.clientY]);
        setIsMoving(true);
        // Clear delay interval
        timer = setTimeout(mouseStopped, delay || defaultDelay);
    }

    /**
     * Reports that mouse stopped moving
     */
    function mouseStopped() {
        setIsMoving(false);
    }

    // Update ref.current value if handler changes.
    // This allows our effect below to always get latest handler ...
    // ... without us needing to pass it in effect deps array ...
    // ... and potentially cause effect to re-run every render.
    useEffect(() => {
        savedHandler.current = handler;
    }, [handler]);

    useEffect(
        () => {
            // Make sure element supports addEventListener
            const isSupported = element && element.addEventListener;

            if (!isSupported) {
                return;
            }

            // Create event listener that calls handler function stored in ref
            // eslint-disable-next-line require-jsdoc-except/require-jsdoc
            const eventListener = (event: any) => savedHandler.current(event);

            // Add event listener
            element.addEventListener(eventName, eventListener);

            // Remove event listener on cleanup
            // eslint-disable-next-line consistent-return
            return () => {
                element.removeEventListener(eventName, eventListener);
            };
        },
        [eventName, element], // Re-run if eventName or element changes
    );

    return [coords, isMoving];
}