import React from 'react';
import {
  Container,
  Grid,
  makeStyles
} from '@material-ui/core';
import Page from 'src/components/Page';
import RoverControl from './RoverControl';
import SensorReadings from './SensorReadings';
import ServoControl from './ServoControl';
import Videofeed from './Videofeed';

const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: theme.palette.background.dark,
    minHeight: '100%',
    paddingBottom: theme.spacing(3),
    paddingTop: theme.spacing(3)
  }
}));

const Dashboard = () => {
  const classes = useStyles();

  return (
    <Page
      className={classes.root}
      title="Dashboard"
    >
      <Container maxWidth={false}>
        <Grid
          container
          spacing={3}
        >
          <Grid
            item
            xl={4}
            lg={4}
            md={3}
            sm={3}
            xs={12}
          >
            <RoverControl />
          </Grid>
          <Grid
            item
            xl={8}
            lg={8}
            md={9}
            sm={9}
            xs={12}
          >
            <Videofeed />
          </Grid>
          <Grid
            item
            lg={4}
            md={6}
            xl={3}
            xs={12}
          >
            <ServoControl />
          </Grid>
          <Grid
            item
            lg={8}
            md={12}
            xl={9}
            xs={12}
          >
            <SensorReadings />
          </Grid>
        </Grid>
      </Container>
    </Page>
  );
};

export default Dashboard;
