import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef } from 'react';
import styled from 'styled-components';
import { Button } from '../atoms';
const TooltipTriggerWrapper = styled.div `
  position: relative;
`;
const TooltipContent = styled.div `
  position: absolute;
  left: 16px;
  top: 40px;
  z-index: 9999;
  left: 0;
  overflow: hidden;
  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
`;
function TooltipTrigger({ children, shown, onClose, ...overlayStyles }) {
    const ref = useRef(null);
    useEffect(() => {
        document.addEventListener('mousedown', (event) => {
            if (!ref?.current) {
                return;
            }
            if (!ref.current.contains(event.target)) {
                onClose();
            }
        });
    }, []);
    return (_jsxs(TooltipTriggerWrapper, { children: [children[0], shown ? (_jsx(TooltipContent, { ref: ref, className: "ant-dropdown ant-dropdown-placement-bottomLeft ", style: { ...overlayStyles }, children: children[1] })) : null] }));
}
export function ButtonDropdown({ show, overlay, disabled = false, overlayStyles, onOverlayClose, onOverlayOpen, onItemClick, ...buttonProps }) {
    return (_jsxs(TooltipTrigger, { shown: show, ...overlayStyles, onClose: () => {
            onOverlayClose();
        }, children: [_jsx(Button, { ...buttonProps, onClick: () => {
                    onOverlayOpen();
                }, disabled: disabled }), _jsx("div", { onClick: onItemClick, children: overlay })] }));
}
//# sourceMappingURL=ButtonDropdown.js.map