import React, {Component} from "react";
import { Button, Divider, FormControl, Grid, InputLabel, MenuItem, Paper, Select, Typography } from "@material-ui/core";
import { withStyles } from '@material-ui/core/styles';
import { Link } from 'react-router-dom';
import {  reduxForm } from "redux-form";


const styles = ({
    root: {
      flexGrow: 1,
      marginTop: 30,
      padding: 20
    },
    field: {
        width: '70%',
        marginBottom: 20
    },
    divider:{
      ".MuiDivider-inset": {
        marginLeft:"72px"
      }
    }
  });

  const initData = {
    selection: 'option1',
  };

class SimulacionMain extends Component {
    state = {
        tipo:''
    }

    handleChange = event => {
        this.setState({ tipo: event.target.value });
    };

    render() { 
        const trueBool = true;
        const { classes } = this.props;
        return (
          <div>
            <Typography variant="h4">
                {`Simulación`}
            </Typography>
            <div>  
              <Paper className={classes.root}>
                <Grid container>
                    <Grid item xs={12} sm={4} >
                        <Typography variant="h6">
                            Datos generales
                        </Typography>
                        <form>
                            <div>
                            <FormControl className={classes.field}>
                                <InputLabel htmlFor="tipoid">Tipo de simulación</InputLabel>
                                <Select
                                    value={this.state.tipo}
                                    onChange={this.handleChange}
                                    placeholder="Seleccionar"
                                    autoWidth={trueBool}
                                    inputProps={{
                                        name: 'tipo',
                                        id: 'tipoid',
                                      }}
                                >
                                <MenuItem value ={"option1"} >Simulación a 7 días</MenuItem>
                                <MenuItem value={"option2"} >Simulación as colapso</MenuItem>                                
                                </Select>
                            </FormControl>
                            </div>

                            <div>
                              <Link to ={{
                                pathname:"/app/simulacion"
                                  }}  style={{ textDecoration: 'none' }}>

                                <Button variant="contained" color="secondary">
                                    Iniciar Simulación
                                </Button>
                              </Link>
                            </div>
                        </form>
                    </Grid>
                    <Grid item xs={12} sm={1} >
                      <Divider orientation="vertical" flexItem variant="inset" style={{ marginLeft:"10px"}}/>
                    </Grid>
                    <Grid item xs={12} sm={7}>
                        <Typography variant="h6">
                            {`Pedidos`}
                        </Typography>
                    </Grid>
                </Grid>
              </Paper>
            </div>
          </div>
        );
    }
}

const SimulacionMainMapped = reduxForm({
    form: 'immutableExample',
  })(SimulacionMain);
 
export default withStyles(styles)(SimulacionMainMapped);