import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "className", "icon", "onHide", "onSelect", "onShow", "position", "selectable", "selected", "onClick"];
import React, { useState } from 'react';
import cx from 'classnames';
import { IconMoreMediumOutline } from '@teamleader/ui-icons';
import IconButton from '../iconButton';
import Menu from './Menu';
import theme from './theme.css';
import Box, { pickBoxProps } from '../box';

var IconMenu = function IconMenu(_ref) {
  var children = _ref.children,
      _ref$className = _ref.className,
      className = _ref$className === void 0 ? '' : _ref$className,
      icon = _ref.icon,
      onHide = _ref.onHide,
      onSelect = _ref.onSelect,
      onShow = _ref.onShow,
      _ref$position = _ref.position,
      position = _ref$position === void 0 ? 'auto' : _ref$position,
      _ref$selectable = _ref.selectable,
      selectable = _ref$selectable === void 0 ? false : _ref$selectable,
      selected = _ref.selected,
      onClick = _ref.onClick,
      others = _objectWithoutProperties(_ref, _excluded);

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      active = _useState2[0],
      setActive = _useState2[1];

  var buttonIcon = icon || /*#__PURE__*/React.createElement(IconMoreMediumOutline, null);
  var boxProps = pickBoxProps(others);

  var handleButtonClick = function handleButtonClick(event) {
    setActive(!active);
    onClick && onClick(event);
  };

  var handleMenuHide = function handleMenuHide() {
    setActive(false);
    onHide && onHide();
  };

  return /*#__PURE__*/React.createElement(Box, _extends({
    "data-teamleader-ui": "icon-menu"
  }, boxProps, {
    className: cx(theme['icon-menu'], className)
  }), /*#__PURE__*/React.createElement(IconButton, {
    className: theme['icon'],
    icon: buttonIcon,
    onClick: handleButtonClick
  }), /*#__PURE__*/React.createElement(Menu, {
    active: active,
    onHide: handleMenuHide,
    onSelect: onSelect,
    onShow: onShow,
    position: position,
    selectable: selectable,
    selected: selected
  }, children));
};

export default IconMenu;