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 RadioGroup from '@material-ui/core/RadioGroup';
import { withStyles } from '@material-ui/core/styles';
import Checkbox from '@material-ui/core/Checkbox';

/* tslint:disable */
const styles = (theme) =>({
  radioGroupMultiColumn: {
    flexDirection: 'row' as 'row',
    justifyContent: 'flex-start' as 'flex-start',
    '& > label': {
      flexBasis: '12%',
      [theme.breakpoints.down('lg')]: {
        flexBasis: '24%',
      },
      [theme.breakpoints.down('md')]: {
        flexBasis: '32%',
      },
      [theme.breakpoints.down('sm')]: {
        flexBasis: '45%',
      },
      [theme.breakpoints.down('xs')]: {
        flexBasis: '100%',
      },
    },
  },
});
/* tslint:enable */

const handleCheckboxChange = (fields, code)  => {
  const index = fields.getAll() ? fields.getAll().indexOf(code) : -1;

  if (index === -1) {
    fields.push(code);
  } else {
    fields.remove(index);
  }
};

const CheckboxSelection = ({formLabel, singleColumn = false, options, renderOptionLabel, valueField, fields, input, meta, classes, t, ...rest}) => (
  <FormControl required className={ classes.root } fullWidth>
    <FormLabel className={ classes.formLabel }>{ formLabel }</FormLabel>
    <RadioGroup
      { ...input }
      { ...rest }
      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={
            <Checkbox
              checked={ fields.getAll() && fields.getAll().indexOf(valueField ? option[valueField] : option) !== -1 }
              onChange={ (event, value) => handleCheckboxChange(fields,valueField ? option[valueField] : option) } // tslint:disable-line
            />
          }
          className={ classes.label }
        />
      ))
      }
    </RadioGroup>
  </FormControl>
);

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