import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["align", "breakpoint", "legendText", "inline", "invalid", "children", "className", "inputSpacing", "message", "messageText"];
import PropTypes from 'prop-types';
import React from 'react';
import classnames from 'classnames';
import { settings } from '../../globals/js';
var prefix = settings.prefix;
/** A FormGroup element is used to group several controls as well as labels  within a web form. It uses  `<fieldset>` */

var FormGroup = function FormGroup(_ref) {
  var _classnames;

  var align = _ref.align,
      breakpoint = _ref.breakpoint,
      legendText = _ref.legendText,
      inline = _ref.inline,
      invalid = _ref.invalid,
      children = _ref.children,
      className = _ref.className,
      inputSpacing = _ref.inputSpacing,
      message = _ref.message,
      messageText = _ref.messageText,
      other = _objectWithoutProperties(_ref, _excluded);

  var classNamesLegend = classnames("".concat(prefix, "--form-group__title"), className);
  var classNamesFieldset = classnames("".concat(prefix, "--fieldset"), (_classnames = {}, _defineProperty(_classnames, "".concat(prefix, "--fieldset__inline"), inline), _defineProperty(_classnames, "".concat(prefix, "--fieldset__align-").concat(align), align), _defineProperty(_classnames, "".concat(prefix, "--fieldset__breakpoint-").concat(breakpoint), breakpoint), _defineProperty(_classnames, "".concat(prefix, "--fieldset__input-spacing-").concat(inputSpacing), inputSpacing), _classnames), className);
  return /*#__PURE__*/React.createElement("div", _extends({}, invalid && {
    'data-invalid': ''
  }, {
    className: classNamesFieldset
  }, other), /*#__PURE__*/React.createElement("legend", {
    className: classNamesLegend
  }, legendText), /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefix, "--fieldset__content")
  }, children), message ? /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefix, "--form__requirements")
  }, messageText) : null);
};

FormGroup.propTypes = {
  /**
   * Specify the contained form elements
   */
  children: PropTypes.node,

  /**
   * Specify a breakpoint to show containing inputs vertically on mobile devices
   */
  breakpoint: PropTypes.oneOf(['none', 'sm', 'md', 'lg']),

  /**
   * Specify a title for the `FormGroup`
   */
  legendText: PropTypes.string,

  /**
   * Specify an optional className to be applied to the wrapper node
   */
  className: PropTypes.string,

  /**
   * Specify whether the control is currently invalid.
   * Either a boolean in combination with `invalidText` or an `object`( eg. { message: "Message", …otherErrorProperties }) can be passed.
   */
  invalid: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),

  /**
   * Specify if a message is shown for the `fieldset`
   */
  message: PropTypes.bool,

  /**
   * Specify a message for the `fieldset`
   */
  messageText: PropTypes.string,

  /**
   * Specify a message for the `fieldset`
   */
  align: PropTypes.oneOf(['vertical', 'horizontal']),

  /**
   * Specify the spacing between horizontaly aligned inputs
   */
  inputSpacing: PropTypes.oneOf(['none', 'md', 'lg'])
};
FormGroup.defaultProps = {
  align: 'vertical',
  invalid: false,
  inputSpacing: 'lg',
  breakpoint: 'md',
  message: false,
  messageText: ''
};
export default FormGroup;