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

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

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;
