/* eslint-disable no-unused-vars */
import React from 'react';
import { Provider } from 'react-redux';
import store from './redux/store/store';
import { withStyles } from '@material-ui/core/styles';
import { Grid, Paper } from '@material-ui/core';
import SettingPanel from './SettingPanel/SettingPanel';
import TablePanel from './TablePanel/TablePanel';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import CustomTable from 'components/CustomTable';
import DungeonSelect from './DungeonSelect/DungeonSelect';

const styles = theme => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    padding: theme.spacing.unit * 2,
    // textAlign: 'center',
    // color: "black",
  },
});

const DungeonCheck = ({ classes }) => {
  return (
    <Provider store={store}>
      <div className={classes.root}>
        <Grid container spacing={24}>
          <Grid item xs={12} md={3}>
            {/* <Paper className={classes.paper}>xs=12 sm=3</Paper> */}
            <DungeonSelect />
          </Grid>
          <Grid item xs={12} md={4}>
            <SettingPanel />
          </Grid>
          <Grid item xs={12} md={4}>
            <CustomTable />
            {/* <TablePanel/> */}
          </Grid>
        </Grid>
      </div>
    </Provider>
  );
}

export default withStyles(styles)(DungeonCheck);