//App.js
import React, { Component } from 'react';
import Paper from '@material-ui/core/Paper';
import { withStyles } from '@material-ui/styles';
import Grid from '@material-ui/core/Grid';
import FeatureInputFields from './FeatureInputFields';
import FeatureHistory from './FeatureHistory';


const styles = theme => ({
  root: {
    margin: '10px',
    height: 400,
    width: 300,
    padding: '0 30px',
    overflowY: 'scroll',
  },
});

class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      field1: '',
      field2: '',
      field3: '',
      fieldHistory: [["", "", "", ""]]
    }
    this.handleSubmit = this.handleSubmit.bind(this);
    this.updateField = this.updateField.bind(this);
    this.restoreState = this.restoreState.bind(this);
  }

  updateField(fieldName, newValue) {
    console.log('Updating field data in store');
    this.setState({
        [fieldName]: newValue
    });
  }

  handleSubmit() {
    console.log(this.state)
    this.setState({
      fieldHistory: [...this.state.fieldHistory, [this.state.field1, this.state.field2, this.state.field3, Date()]]
    });
  }

  restoreState(index) {
    this.setState({
      field1: this.state.fieldHistory[index][0],
      field2: this.state.fieldHistory[index][1],
      field3: this.state.fieldHistory[index][2]
    })
  }

  render () {
    const { classes } = this.props;
    return (
        <Grid container spacing={0}>
          <Grid item>
            <Paper className={classes.root}>
              <FeatureInputFields fieldValues={ this.state } handleChange={ (fieldName, fieldValue) => this.updateField(fieldName, fieldValue) } handleSubmit={this.handleSubmit}/>
            </Paper>
          </Grid>
          <Grid item>
            <Paper className={classes.root}>
              <FeatureHistory fieldHistory={ this.state.fieldHistory } restoreState={ this.restoreState }/>
            </Paper>
          </Grid>
        </Grid>
    );
  }
}
export default withStyles(styles)(App);

//FeatureInputFields.js
import React from 'react';
import { withStyles } from '@material-ui/styles';
import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';

const styles = theme => ({
  textField: {
    //marginLeft: theme.spacing(1),
    // marginRight: theme.spacing(1),
    width: 200,
  }
});

function FeatureInputFields(props) {
    const { classes } = props;
    return (
      <div>
          <h3>Input Fields</h3>
          <Grid container spacing={0}>
            <Grid item xs={12}>
              <TextField
              id="standard-name"
              label="Field1"
              test-class='field1input'
              className={classes.textField}
              value={props.fieldValues.field1}
              onChange={(event) => props.handleChange('field1', event.target.value)}
              onBlur={(props.fieldValues.fieldHistory[props.fieldValues.fieldHistory.length-1][0] != props.fieldValues.field1 ? props.handleSubmit : null)}
              margin="normal"
            />
            </Grid>
            <Grid item xs={12}>
              <TextField
              id="standard-name"
              label="Field2"
              test-class='field2input'
              className={classes.textField}
              value={props.fieldValues.field2}
              onChange={(event) => props.handleChange('field2', event.target.value)}
              onBlur={(props.fieldValues.fieldHistory[props.fieldValues.fieldHistory.length-1][1] != props.fieldValues.field2 ? props.handleSubmit : null)}
              margin="normal"
            />
            </Grid>
            <Grid item xs={12}>
              <TextField
              id="standard-name"
              label="Field3"
              test-class='field3input'
              className={classes.textField}
              value={props.fieldValues.field3}
              onChange={(event) => props.handleChange('field3', event.target.value)}
              onBlur={(props.fieldValues.fieldHistory[props.fieldValues.fieldHistory.length-1][2] != props.fieldValues.field3 ? props.handleSubmit : null)}
              margin="normal"
            />
            </Grid>
          </Grid>
      </div>
    )
};

export default withStyles(styles)(FeatureInputFields);

//FeatureHistory.js
import React from 'react';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import IconButton from '@material-ui/core/IconButton';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import ReloadIcon from '@material-ui/icons/Update'


const list = function(nestedArray, props) {
  return nestedArray.slice(1, ).map(
(el, index) =>
  <ListItem button alignItems="flex-start" key={index}>
    <ListItemText
    primary={el.slice(0,3).map((value, index) => <div>{"Field".concat(index+1, ": ", value)}</div>)}/>
    <ListItemSecondaryAction onClick={() => props.restoreState(index+1)}>
      <IconButton edge="end" aria-label="reload">
      <ReloadIcon />
      </IconButton>
      </ListItemSecondaryAction>
  </ListItem>
  ).reverse()
}

function FeatureHistory(props) {
    const fields = list(props.fieldHistory, props)
    return (
     <div>
      <h3>Feature History</h3>
      <List component="nav" aria-label="main mailbox folders">
        {fields}
      </List>
    </div>
    )
};

export default FeatureHistory;