import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Route, Switch, Redirect } from 'react-router-dom';
import { PropTypes } from 'prop-types';
import Home from '../Home/Home';
import Employee from '../Employee/Employee';
import Transaction from '../Transactions/Transaction';
import Inventory from '../Inventory/Inventory';
import Register from '../Register/Register';
import UpdateProduct from '../UpdateProduct/UpdateProductForm';
import SimpleSnackbar from '../SnackBar/Snackbar';
import SnackContextProvider from '../SnackBar/SnackContext';
import UpdateEmployee from '../UpdateEmployee/UpdateEmployeeForm';

const drawerWidth = 230;

const useStyles = makeStyles(theme => ({
  container: {
    padding: theme.spacing(5),
    paddingTop: theme.spacing(13),
    marginLeft: drawerWidth,
    [theme.breakpoints.only('sm')]: {
      marginLeft: props => (props.tab ? drawerWidth : '4.5rem'),
    },
    [theme.breakpoints.only('xs')]: {
      marginLeft: 0,
      paddingLeft: theme.spacing(3),
      paddingRight: theme.spacing(3),
    },
  },
}));

const Container = ({ tabletOpen }) => {
  const classes = useStyles({ tab: tabletOpen });

  return (
    <div className={classes.container}>
      <SnackContextProvider>
        <Switch>
          <Route exact path='/'>
            <Home />
          </Route>
          <AdminRoute path='/employee'>
            <Employee />
          </AdminRoute>
          <Route path='/transaction'>
            <Transaction />
          </Route>
          <Route path='/inventory'>
            <Inventory />
          </Route>
          <Route path='/updateproduct'>
            <UpdateProduct />
          </Route>
          <Route path='/updateemployee'>
            <UpdateEmployee />
          </Route>
          <AdminRoute path='/addemployee'>
            <Register />
          </AdminRoute>
        </Switch>
        <SimpleSnackbar />
      </SnackContextProvider>
    </div>
  );
};

// Admin Route Component
const AdminRoute = ({ children, path, ...rest }) => {
  const isAdmin = localStorage.getItem('isStaff');

  // User cannot directly open respective page if user is not an admin.
  // It also redirects the user to home page

  return (
    <Route
      path={path}
      // eslint-disable-next-line react/jsx-props-no-spreading
      {...rest}
      render={
        ({ location }) =>
          isAdmin ? (
            children
          ) : (
            <Redirect to={{ pathname: '/', state: { from: location } }} />
          )
        // eslint-disable-next-line react/jsx-curly-newline
      }
    />
  );
};

AdminRoute.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.element.isRequired,
    PropTypes.arrayOf(PropTypes.element).isRequired,
  ]).isRequired,
  path: PropTypes.string.isRequired,
};

Container.propTypes = {
  tabletOpen: PropTypes.bool.isRequired,
};

export default Container;