import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React from 'react';
import PropTypes from 'prop-types';
import Col from '../Col';
import Row from '../Row';
import Box from '../Box';
import Label from '../Label';
import SuperFieldHint from '../SuperFieldHint';
export var getVariant = function getVariant(_ref) {
  var hasError = _ref.hasError,
      readOnly = _ref.readOnly,
      disabled = _ref.disabled;

  if (hasError) {
    return 'danger';
  }

  if (disabled || readOnly) {
    return 'disabled';
  }
};

var FormGroup = function FormGroup(_ref2) {
  var children = _ref2.children,
      disabled = _ref2.disabled,
      readOnly = _ref2.readOnly,
      hasError = _ref2.hasError,
      hint = _ref2.hint,
      legend = _ref2.legend,
      label = _ref2.label,
      id = _ref2.id,
      name = _ref2.name,
      rest = _objectWithoutProperties(_ref2, ["children", "disabled", "readOnly", "hasError", "hint", "legend", "label", "id", "name"]);

  return /*#__PURE__*/React.createElement(Box, {
    as: "fieldset",
    variant: getVariant({
      hasError: hasError,
      readOnly: readOnly,
      disabled: disabled
    }),
    sx: {
      border: 'none',
      appearance: 'none',
      p: 0
    }
  }, /*#__PURE__*/React.createElement(Row, _extends({
    flexWrap: "wrap",
    alignItems: "center",
    justifyContent: "center"
  }, rest), /*#__PURE__*/React.createElement(Col, {
    span: [12, 12, 5, 4],
    pb: [2, 2, 0]
  }, /*#__PURE__*/React.createElement(Label, {
    htmlFor: legend ? void 0 : id,
    as: legend ? 'legend' : 'label',
    sx: {
      width: '100%',
      p: 0
    }
  }, legend || label)), /*#__PURE__*/React.createElement(Col, {
    span: [12, 12, 7, 8]
  }, children)), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
    span: 12
  }, hint ? /*#__PURE__*/React.createElement(SuperFieldHint, null, hint) : null)));
};

process.env.NODE_ENV !== "production" ? FormGroup.propTypes = {
  /** Children to be rendered in the main container. */
  children: PropTypes.node,

  /** Disabled state */
  disabled: PropTypes.bool,

  /** Error state */
  hasError: PropTypes.bool,
  hint: PropTypes.node,
  id: PropTypes.string,
  label: PropTypes.node,
  legend: PropTypes.node,

  /** Read-only state */
  readOnly: PropTypes.bool
} : void 0;
export default FormGroup;