import React from 'react';
import { Field } from 'redux-form';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
  label: {
    margin: theme.spacing.unit * 20
  },
});

const renderRadioGroup = ({ input, ...rest }) => (
  <RadioGroup
    {...input}
    {...rest}
    value={input.value}
    onChange={(event, value) => input.onChange(value)}
  />
);

const RadioInput = ({
  fieldName, fieldLabel, radioButtons, required
}) => (
  <FormControl required={required} component="fieldset">
    <FormLabel required={required} component="legend">
      {fieldLabel}
    </FormLabel>
    <Field name={fieldName} component={renderRadioGroup}>
      {radioButtons.map(button => (
        <FormControlLabel key={button.value} value={button.value} control={<Radio color="primary" required />} label={button.label} />
      ))}
    </Field>
  </FormControl>
);

export default withStyles(styles)(RadioInput);