import PropTypes from 'prop-types';
import React from 'react';
import classNames from 'classnames';
import ToolbarButton from './ToolbarButton';
import ToolbarLink from './ToolbarLink';

var Left = function Left(props) {
  return React.createElement("div", {
    className: "toolbar__left"
  }, props.children);
};

Left.propTypes = {
  children: PropTypes.node.isRequired
};

var Right = function Right(props) {
  return React.createElement("div", {
    className: "toolbar__right"
  }, props.children);
};

Right.propTypes = {
  children: PropTypes.node.isRequired
};

var Toolbar = function Toolbar(props) {
  var toolbarContentClasses = classNames({
    'toolbar__content': true,
    'toolbar__content--bare': props.toolbarStyle === 'bare',
    'background--white': props.isBottomToolbar,
    'border--top': props.isBottomToolbar,
    'no-border--bottom': props.isBottomToolbar || props.toolbarStyle === 'bare',
    'hard--left': props.isBottomToolbar
  });
  return React.createElement("div", {
    "data-oui-component": true,
    className: "toolbar",
    "data-test-section": props.testSection
  }, React.createElement("div", {
    className: toolbarContentClasses
  }, props.children));
};

Toolbar.defaultProps = {
  isBottomToolbar: false
};
Toolbar.propTypes = {
  /** Items to render for the toolbar */
  children: PropTypes.node.isRequired,

  /** Whether this toolbar sits at the bottom of a page */
  isBottomToolbar: PropTypes.bool,

  /** Hook to uze for automated testing */
  testSection: PropTypes.string,

  /** The style to use for this toolbar */
  toolbarStyle: PropTypes.oneOf(['bare'])
};
Toolbar.Button = ToolbarButton;
Toolbar.Link = ToolbarLink;
Toolbar.Right = Right;
Toolbar.Left = Left;
export default Toolbar;