content: import React from 'react';
  import { resolve } from '../styles';
  import GridLayout from '../components/GridLayout';
  import GridLayoutStyles from '../components/GridLayout.less';
  
  import SiteStyles from '../styles/Site.less';
  /* eslint no-console: 0 */
  /* eslint arrow-body-style: 0 */
  /* eslint react/jsx-no-bind: 0 */
  export default class Home extends React.Component {
    static displayName = 'Home';
    static propTypes = {
      classes: React.PropTypes.object,
      items: React.PropTypes.array,
      history: React.PropTypes.object,
    };
  
    static defaultProps = {
      classes: SiteStyles,
    };
    constructor(props) {
      super(props);
      this.state = {
        items: [
          { name: '1 x 100%', mod: 6 },
          { name: '1 x 20%', mod: 1 },
          { name: '1 x 60%', mod: 4 },
          { name: '1 x 20%', mod: 1 },
          { name: '2 x 33.33%', mod: 2 },
          { name: '2 x 33.33%', mod: 2 },
          { name: '2 x 33.33%', mod: 2 },
          { name: '3 x 50%', mod: 3 },
          { name: '3 X 50%', mod: 3 },
          { name: '3 x 80%', mod: 5 },
          { name: '3 X 20%', mod: 1 },
        ],
      };
    }
    onClick = (path) => {
      this.props.history.push(path);
    }
    handleHover = () => { // index, power
      // const items = this.state.items;
      // const item = items[index];
      // if (item.mod > 1 || item.mod < 5) {
      //   const colsize = item.mod + power;
      //   item.mod = colsize;
      // }
      // items[index].mod = item.mod;
      // this.setState({
      //   items,
      // });
    }
    render() {
      const { items } = this.state;
      const background = `home${~~(Math.random() * 7)}`;
      return (
        <div {...resolve(this.props, 'container', background)}>
          <div {...resolve(this.props, 'widget')}>
            <GridLayout items = {items} classes = {GridLayoutStyles} handleHover = {this.handleHover} />
          </div>
        </div>
      );
    }
  }
  