content: // @flow weak
  
  import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import { withStyles } from 'material-ui/styles';
  import Grid from 'material-ui/Grid';
  import { FormLabel, FormControlLabel } from 'material-ui/Form';
  import Radio, { RadioGroup } from 'material-ui/Radio';
  import Paper from 'material-ui/Paper';
  
  const styles = theme => ({
    root: {
      flexGrow: 1,
    },
    paper: {
      height: 140,
      width: 100,
    },
    control: {
      padding: theme.spacing.unit * 2,
    },
  });
  
  class GuttersGrid extends Component {
    state = {
      spacing: '16',
    };
  
    handleChange = key => (event, value) => {
      this.setState({
        [key]: value,
      });
    };
  
    render() {
      const classes = this.props.classes;
      const { spacing } = this.state;
  
      return (
        <Grid container className={classes.root}>
          <Grid item xs={12}>
            <Grid container className={classes.demo} justify="center" spacing={Number(spacing)}>
              {[0, 1, 2].map(value =>
                <Grid key={value} item>
                  <Paper className={classes.paper} />
                </Grid>,
              )}
            </Grid>
          </Grid>
          <Grid item xs={12}>
            <Paper className={classes.control}>
              <Grid container>
                <Grid item>
                  <FormLabel>spacing</FormLabel>
                  <RadioGroup
                    name="spacing"
                    aria-label="spacing"
                    selectedValue={spacing}
                    onChange={this.handleChange('spacing')}
                    row
                  >
                    <FormControlLabel value="0" control={<Radio />} label="0" />
                    <FormControlLabel value="8" control={<Radio />} label="8" />
                    <FormControlLabel value="16" control={<Radio />} label="16" />
                    <FormControlLabel value="24" control={<Radio />} label="24" />
                    <FormControlLabel value="40" control={<Radio />} label="40" />
                  </RadioGroup>
                </Grid>
              </Grid>
            </Paper>
          </Grid>
        </Grid>
      );
    }
  }
  
  GuttersGrid.propTypes = {
    classes: PropTypes.object.isRequired,
  };
  
  export default withStyles(styles)(GuttersGrid);
  