import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import { noop } from 'lodash';
import Icon from './Icon';

const renderIcon = ({
  icon
}) => {
  let iconElement = null;

  if (icon) {
    if (typeof icon === 'string') {
      // eslint-disable-next-line
      const Icon = require('./Icon').default;

      iconElement = /*#__PURE__*/React.createElement(Icon, {
        name: icon
      });
    } else {
      iconElement = /*#__PURE__*/React.cloneElement(icon);
    }
  }

  return iconElement;
};

const ActionButton = /*#__PURE__*/React.memo(props => {
  const {
    disabled,
    onClick,
    icon,
    color,
    title = 'Add'
  } = props;
  const classes = cx({
    'action-button': true,
    'action-button--disabled': disabled,
    'action-button--clickable': onClick !== noop,
    [`action-button--${color}`]: !!color
  });
  return /*#__PURE__*/React.createElement("button", {
    type: "button",
    onClick: onClick,
    className: classes,
    title: title,
    tabIndex: "0"
  }, /*#__PURE__*/React.createElement("div", {
    className: "icon-container"
  }, renderIcon({
    icon
  })), /*#__PURE__*/React.createElement("div", {
    className: "plus-button"
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "menu-new-session",
    color: "sea-green",
    size: "small"
  })));
});
ActionButton.propTypes = {
  disabled: PropTypes.bool,
  onClick: PropTypes.func,
  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
  color: PropTypes.string,
  title: PropTypes.string
};
ActionButton.defaultProps = {
  disabled: false,
  onClick: noop,
  icon: null,
  color: null,
  title: 'Add'
};
export default ActionButton;