import { jsx } from "@emotion/core";
import PropTypes from "prop-types";
import shortid from "shortid";
import { FormControlLabel, FormLabel, FormControl, FormHelperText } from "@material-ui/core";
import MaterialRadio from "@material-ui/core/Radio";
import MaterialRadioGroup from "@material-ui/core/RadioGroup";
import { ThemeProvider } from "@material-ui/styles";
import { MaterialTheme } from "../_Themes/index";

var RadioButtonGroup = function RadioButtonGroup(_ref) {
  var labels = _ref.labels,
      onChange = _ref.onChange,
      disabled = _ref.disabled,
      value = _ref.value,
      grpLabel = _ref.grpLabel,
      labelPlacement = _ref.labelPlacement,
      row = _ref.row,
      formHelperText = _ref.formHelperText;
  return jsx(ThemeProvider, {
    theme: MaterialTheme
  }, jsx(FormControl, {
    disabled: disabled
  }, jsx(FormLabel, null, grpLabel), jsx(MaterialRadioGroup, {
    "aria-label": grpLabel,
    name: grpLabel,
    onChange: onChange,
    value: value,
    row: row
  }, labels.map(function (label) {
    return jsx(FormControlLabel, {
      key: shortid.generate(),
      value: label,
      control: jsx(MaterialRadio, {
        inputProps: {
          "aria-label": {
            label: label
          }
        }
      }),
      label: label,
      labelPlacement: labelPlacement
    });
  })), jsx(FormHelperText, null, formHelperText)));
};

RadioButtonGroup.displayName = "RadioButtonGroup";
RadioButtonGroup.propTypes = {
  labels: PropTypes.arrayOf(PropTypes.string),
  value: PropTypes.string,
  grpLabel: PropTypes.string,
  labelPlacement: PropTypes.string,
  formHelperText: PropTypes.string,
  row: PropTypes.bool,
  disabled: PropTypes.bool,
  onChange: PropTypes.func
};
RadioButtonGroup.defaultProps = {
  labels: ["Label 1", "Label 2", "Label 3"],
  value: "Label 1",
  grpLabel: "GroupLabel",
  labelPlacement: "end",
  formHelperText: "",
  row: false,
  disabled: false
};
export default RadioButtonGroup;