import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import PropTypes from 'prop-types';
import { AppBar, Tabs, Tab, Paper, Typography } from '@material-ui/core';
import { connect } from 'react-redux';

import CamionTab from './CamionTab/CamionTab';
import FlotaTab from './FlotaTab/FlotaTab';
import AveriaTab from './AveriaTab/AveriaTab';

//actions


function TabContainer(props) {
    return (
      <Typography component="div" style={{ padding: 8 * 3 }}>
        {props.children}
      </Typography>
    );
  }
  
  TabContainer.propTypes = {
    children: PropTypes.node.isRequired,
  };

const styles = ({
    root: {
      flexGrow: 1,
      marginTop: 30,
    }
  });

class CamionesMain extends Component {
  constructor (props) {
    
    super(props)
    this.state = {
      value: 0
    };

  }

  handleChange = (event, value) => {
    this.setState({ value });
  };

    render() {
      const {value} = this.state;
      const { classes } = this.props;
        return (
          <div>
            <Typography variant="h4">
                {`Camiones`}
            </Typography>
            <div>  
              <Paper className={classes.root}>
                <AppBar position="static">
                    <Tabs value={value} onChange={this.handleChange}>
                        <Tab label="Camiones" />
                        <Tab label="Flota" />
                        <Tab label="Averías" />
                    </Tabs>
                    </AppBar>
                    {value === 0 && 
                        <TabContainer> 
                          <CamionTab/>
                        </TabContainer>}
                    {value === 1 && 
                      <TabContainer> 
                        <FlotaTab/>
                      </TabContainer>}
                    {value === 2 && 
                      <TabContainer> 
                        <AveriaTab/>
                      </TabContainer>}
              </Paper>
            </div>
          </div>
        );
    }
}

CamionesMain.propTypes = {
  classes: PropTypes.object.isRequired,
};

const reducer = 'pedido'
const mapStateToProps = state => ({
  force: state, // force state from reducer
});

const mapDispatchToProps = dispatch => ({
  dispatch
});

const CamionesMainMapped = connect(
  mapStateToProps,
  mapDispatchToProps
)(CamionesMain);

export default withStyles(styles)(CamionesMainMapped);