import React, { useRef, useEffect } from "react";
import classNames from "classnames";
import { useSelector } from "../../../store/redux-separate-context";
import { selectShowHelp } from "../../global/selectors";
import { Icon } from "../../../components/icon";
import { Button } from "../../../components/button";
export const ToolboxButton = ({ className, iconType, onClick, onDoubleClick, onMouseDown, onTouchStart, popoverContent, popoverTitle, }) => {
    const buttonRef = useRef(null);
    const showHelp = useSelector(selectShowHelp);
    useEffect(() => {
        if (buttonRef.current && showHelp) {
            window.$(buttonRef.current).popover({
                container: "body",
                animation: false,
                html: true,
                trigger: "hover",
                placement: "bottom",
                delay: {
                    show: window.NETDATA.options.current.show_help_delay_show_ms,
                    hide: window.NETDATA.options.current.show_help_delay_hide_ms,
                },
                title: popoverTitle,
                content: popoverContent,
            });
        }
    }, []); // eslint-disable-line react-hooks/exhaustive-deps
    return (React.createElement(Button, { className: classNames(className), onClick: onClick, onDoubleClick: onDoubleClick, onMouseDown: onMouseDown, onTouchStart: onTouchStart, ref: buttonRef },
        React.createElement(Icon, { iconType: iconType })));
};
//# sourceMappingURL=toolbox-button.js.map