import * as React from 'react';
import { translate } from 'react-i18next';

import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormLabel from '@material-ui/core/FormLabel';
import FormControl from '@material-ui/core/FormControl';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import { withStyles } from '@material-ui/core/styles';

/* tslint:disable */
const styles = (theme) =>({
  radioGroupMultiColumn: {
    flexDirection: 'row' as 'row',
    justifyContent: 'flex-start' as 'flex-start',
    '& > label': {
      flexBasis: '12%',
      'html[dir="ltr"] &' : {
        marginRight: '16px',
      },
      'html[dir="rtl"] &' : {
        marginLeft: '16px',
      },
      [theme.breakpoints.down('md')]: {
        flexBasis: '24%',
      },
      [theme.breakpoints.down('sm')]: {
        flexBasis: '45%',
      },
      [theme.breakpoints.down('xs')]: {
        flexBasis: '100%',
      },
    },
  },
  label: {
    // just mock for overriding
  },
});
/* tslint:enable */

const RadioSelection = ({formLabel, singleColumn = false, options, renderOptionLabel, valueField, input, meta, handleChange, classes, required = false, t, ...rest}) => (
  <FormControl required={ required } className={ classes.root } fullWidth>
    <FormLabel className={ classes.formLabel }>{ formLabel }</FormLabel>
    <RadioGroup
      { ...input }
      { ...rest }
      value={ input.value }
      onChange={ handleChange ? handleChange(input) :
        (event, value) => input.onChange(value) // tslint:disable-line
      }
      className={ singleColumn ? classes.radioGroupSingleColumn : classes.radioGroupMultiColumn }
    >
      { options && options.length > 0 &&
        options.map((option, i) => (
           <FormControlLabel
              key={ `radio_option_${i}` }
              value={ valueField ? option[valueField] : option }
              label={ renderOptionLabel ? renderOptionLabel(option) : valueField ? option[valueField] : option }
              control={ <Radio/> }
              classes={ {label: classes.label} }
              { ...rest }
            />
        ))
      }
    </RadioGroup>
  </FormControl>
);

export default withStyles(styles)(translate()(RadioSelection));