import {
    DragEventHandler,
    FocusEventHandler,
    MouseEventHandler,
    TouchEventHandler,
    useEffect,
    useState,
} from 'react';

interface RippleEventHandlers {
    onBlur: FocusEventHandler;
    onContextMenu: MouseEventHandler;
    onDragLeave: DragEventHandler;
    onMouseDown: MouseEventHandler;
    onMouseLeave: MouseEventHandler;
    onMouseUp: MouseEventHandler;
    onTouchEnd: TouchEventHandler;
    onTouchMove: TouchEventHandler;
    onTouchStart: TouchEventHandler;
}

export type InteractionEventsType = MouseEvent &
    TouchEvent &
    DragEvent &
    FocusEvent;

const UseRippleEffect = (ref, callback): undefined | RippleEventHandlers => {
    const [mounted, setMounted] = useState<boolean>(false);

    useEffect(() => {
        if (!mounted) {
            setMounted(true);
        }
    });

    if (!mounted) {
        return;
    }

    const { start, stop } = ref.current;

    return {
        onBlur: event => stop(event, callback),
        onContextMenu: event => start(event, callback),
        onDragLeave: event => stop(event, callback),
        onMouseDown: event => start(event, callback),
        onMouseLeave: event => stop(event, callback),
        onMouseUp: event => stop(event, callback),
        onTouchEnd: event => stop(event, callback),
        onTouchMove: event => stop(event, callback),
        onTouchStart: event => stop(event, callback),
    };
};

export default UseRippleEffect;
