import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {withStyles} from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/Inbox';
import ExpansionPanel from '@material-ui/core/ExpansionPanel';
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import Typography from '@material-ui/core/Typography';
import MDSpinner from 'react-md-spinner';

const styles = {
  root: {
    width: '100%',
  },
  spinner: {
    margin: 'auto',
  },
  sensorListItem: {
    width: '100%',
  },
};

export class SensorNavMenu extends Component {
  static propTypes = {
    classes: PropTypes.object.isRequired,
    getTree: PropTypes.func.isRequired,
    history: PropTypes.object.isRequired,
  };

  state = {
    loading: true,
    tree: {},
  }

  handleSensorChange(name) {
    const search = location.search;
    if (search === '') {
      this.props.history.push('?sensor=' + name);
    } else {
      const start = search.indexOf('sensor=');
      let end = search.substring(start, search.length).indexOf('&');
      end = end > 0 ? end : search.length;
      const toReplace = search.substring(start, end).split('=')[1];
      this.props.history.replace(search.replace(toReplace, name));
    }
  }

  render() {
    if (this.state.loading) {
      this.props.getTree().then((tree) => {
        this.setState({
          loading: false,
          tree: tree.sensors,
        });
      });
      return (
        <MDSpinner
          className={this.props.classes.spinner}
          size={52} />
      );
    }
    if (this.state.loading === false && Object.keys(this.state.tree).length === 0) {
      return (
        <div />
      );
    }
    return (
      <div className={this.props.classes.root}>
        {Object.keys(this.state.tree).map((station, outerIndex) => {
          return (
            <div key={outerIndex}>
              {this.state.tree[station].length > 0 &&
                <ExpansionPanel>
                  <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
                    <Typography className={this.props.classes.heading}>
                      {station}
                    </Typography>
                  </ExpansionPanelSummary>
                  <ExpansionPanelDetails>
                    <List component="nav" className={this.props.classes.sensorListItem}>
                      {this.state.tree[station].map((sensor, innerIndex) => {
                        return (
                          <ListItem key={innerIndex} button onClick={() => {
                            this.handleSensorChange(sensor.uuid);
                          }}>
                            <ListItemIcon>
                              <InboxIcon />
                            </ListItemIcon>
                            <ListItemText primary={sensor.name} />
                          </ListItem>
                        );


                      })}
                    </List>

                  </ExpansionPanelDetails>
                </ExpansionPanel>
              }
            </div>
          );
        })}

      </div>

    );
  }
}

export default withStyles(styles)(SensorNavMenu);

@@ -757,16 +757,56 @@
 pinner';
+%0Aimport queryString from 'query-string';
 %0A%0Aconst 
@@ -1234,16 +1234,34 @@
 earch = 
+queryString.parse(
 location
@@ -1271,41 +1271,41 @@
 arch
+)
 ;%0A    
-if (
 search
- === '') %7B%0A 
+.sensor = name;%0A
     
- 
 this
@@ -1328,340 +1328,62 @@
 ush(
-'?sensor=' + name);%0A    %7D else %7B%0A      const start = search.indexOf('sensor=');%0A      let end = search.substring(start, search.length).indexOf('&');%0A      end = end %3E 0 ? end : search.length;%0A      const toReplace = search.substring(start, end).split('=')%5B1%5D;%0A      this.props.history.replace(search.replace(toReplace, name));
+%7B%0A      search: queryString.stringify(search),
 %0A    %7D
+);
 %0A  %7D

fix nav menu