import React, {useState} from "react";

export type EmulatedButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;

/**
 * Because WordPress is sigh capturing all mouse down clicks, and sometimes you have to click multiple times for the fuckass button to react. so let's capture the mouse down and up events and trigger click manually. sigh again.
 */
export const EmulatedButton = React.forwardRef<HTMLButtonElement, EmulatedButtonProps>(({
                                                                                            onClick,
                                                                                            onMouseDownCapture,
                                                                                            onMouseUp,
                                                                                            onMouseLeave,
                                                                                            children,
                                                                                            ...rest
                                                                                        }, ref) => {
    const [pressed, setPressed] = useState(false);

    const handleMouseDownCapture: React.MouseEventHandler<HTMLButtonElement> = (e) => {
        if (onMouseDownCapture?.(e) === false) {
            return;
        }
        e.preventDefault(); // Prevent focus change
        e.stopPropagation(); // Prevent other handlers
        setPressed(true);
    };

    const handleMouseUp: React.MouseEventHandler<HTMLButtonElement> = (e) => {
        e.preventDefault(); // Prevent focus change
        e.stopPropagation(); // Prevent other handlers
        onMouseUp?.(e);
        if (pressed) {
            // Manually invoke the provided click handler.
            onClick?.(e as any);
        }
        setPressed(false);
    };

    const handleMouseLeave: React.MouseEventHandler<HTMLButtonElement> = (e) => {
        onMouseLeave?.(e);
        setPressed(false);
    };

    return (
        <button
            ref={ref}
            // default to type=button so forms are not accidentally submitted
            type={(rest as any).type || 'button'}
            onMouseDownCapture={handleMouseDownCapture}
            onMouseUpCapture={handleMouseUp}
            onMouseLeave={handleMouseLeave}
            {...rest}
        >
            {children}
        </button>
    );
});