import _noop from "lodash/fp/noop";
import React, { useCallback, useState, useEffect, useRef } from 'react';
import classnames from 'classnames';
import ButtonLinkIcon from '../../atom/button-link-icon';
import ButtonMenu from '../../atom/button-menu';
import propTypes from './types';
import style from './style.css';
const BulletPointMenuButton = props => {
  const {
    disabled = false,
    buttonAriaLabel,
    menuAriaLabel,
    onClick = _noop,
    buttons,
    menuButtonClassName,
    isBulkMenu,
    'data-name': dataName = 'bullet-point-button'
  } = props;
  const [visible, setVisible] = useState(false);
  const wrapperRef = useRef(null);
  const handleOnClick = useCallback(event => {
    event.stopPropagation();
    event.preventDefault();
    onClick();
    setVisible(!visible);
  }, [onClick, visible]);
  useEffect(() => {
    const handleClick = clickEvent => {
      if (wrapperRef && wrapperRef.current && !wrapperRef.current.contains(clickEvent.target)) {
        setVisible(false);
      }
    };
    if (visible) {
      document.addEventListener('click', handleClick);
      document.addEventListener('touchstart', handleClick);
    } else {
      document.removeEventListener('click', handleClick);
      document.removeEventListener('touchstart', handleClick);
    }
    return () => {
      document.removeEventListener('click', handleClick);
      document.removeEventListener('touchstart', handleClick);
    };
  }, [visible]);
  const menuProps = {
    'data-name': 'button-menu',
    buttons
  };
  const menuStyle = classnames(style.bulletPointMenu, isBulkMenu && style.bulkBulletPointMenu, style.visible);
  const menu = visible ? /*#__PURE__*/React.createElement("div", {
    className: menuStyle,
    "data-name": "menu-wrapper",
    "aria-label": menuAriaLabel,
    ref: wrapperRef
  }, /*#__PURE__*/React.createElement(ButtonMenu, menuProps)) : null;
  const bulletPointButtonProps = {
    size: 'default',
    'aria-label': buttonAriaLabel,
    'data-name': dataName,
    icon: 'bullet-point',
    onClick: handleOnClick,
    disabled,
    className: menuButtonClassName
  };
  return /*#__PURE__*/React.createElement("div", {
    className: style.bulletPointWrapper,
    "data-name": "bullet-point-wrapper"
  }, /*#__PURE__*/React.createElement(ButtonLinkIcon, bulletPointButtonProps), menu);
};
BulletPointMenuButton.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
export default BulletPointMenuButton;
//# sourceMappingURL=index.js.map