import { useEffect, useState } from 'react';
import { Outlet } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { useLocation } from 'react-router-dom';

// material-ui
import { useTheme } from '@mui/material/styles';
import { Box, useMediaQuery } from '@mui/material';
import Loadable from 'components/Loadable';
import { lazy } from 'react';
// import { Toolbar, useMediaQuery } from '@mui/material';

// project import
// import Drawer from './Drawer';
// import Header from './Header';
const Header = Loadable(lazy(() => import('./Header')));
const Footer = Loadable(lazy(() => import('components/cards/AuthFooter')));

// import Footer from 'components/cards/AuthFooter';

// import navigation from 'menu-items';
// import Breadcrumbs from 'components/@extended/Breadcrumbs';

// types
import { openDrawer } from 'store/reducers/menu';
// import "assets/style/styles.css";


// ==============================|| MAIN LAYOUT ||============================== //

const MainLayout = () => {
  const theme = useTheme();
  const matchDownLG = useMediaQuery(theme.breakpoints.down('lg'));
  const dispatch = useDispatch();
  const location = useLocation();
  const hideNavbarRoutes = ['/databaseHealthCheck']
  const { drawerOpen } = useSelector((state) => state.menu);

  // drawer toggler
  const [open, setOpen] = useState(drawerOpen);
  // const handleDrawerToggle = () => {
  //   setOpen(!open);
  //   dispatch(openDrawer({ drawerOpen: !open }));
  // };

  // set media wise responsive drawer
  useEffect(() => {
    setOpen(!matchDownLG);
    dispatch(openDrawer({ drawerOpen: !matchDownLG }));

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [matchDownLG]);

  useEffect(() => {
    if (open !== drawerOpen) setOpen(drawerOpen);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [drawerOpen]);

  return (
    <>
      {!hideNavbarRoutes.includes(location.pathname) && (
        <Box sx={{backgroundColor:'#ffffff', display: 'flex', width: '100%', flexDirection: "column", paddingTop: { xs: "5px", sm: "25px", md: "43px" }}}>
          <Header/>
          {/* <Drawer open={open} handleDrawerToggle={handleDrawerToggle} /> */}
          <Box style={{ width: '100%', flexGrow: 1 } } sx={{ paddingTop: "38px" }}>
            {/* <Toolbar /> */}
            {/* <Breadcrumbs navigation={navigation} title /> */}
            <Outlet />
          </Box>
          <Box sx={{borderTop: "3px solid #0C489E"}}>
            <Footer/>
          </Box>
        </Box>
      )}
      {hideNavbarRoutes.includes(location.pathname) && (
          <Outlet />
      )}
    </>
    
  );
};

export default MainLayout;