import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React, { forwardRef } 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 const getVariant = ({
  hasError,
  readOnly,
  disabled
}) => {
  if (hasError) {
    return 'danger';
  }

  if (disabled || readOnly) {
    return 'disabled';
  }
};
const FormGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
  let {
    children,
    disabled,
    readOnly,
    hasError,
    hint,
    legend,
    label,
    id,
    // eslint-disable-next-line react/prop-types,no-unused-vars
    name
  } = _ref,
      rest = _objectWithoutProperties(_ref, ["children", "disabled", "readOnly", "hasError", "hint", "legend", "label", "id", "name"]);

  return /*#__PURE__*/React.createElement(Box, {
    ref: ref,
    as: "fieldset",
    variant: getVariant({
      hasError,
      readOnly,
      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)));
});
FormGroup.displayName = 'FormGroup';
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
};
export default FormGroup;