import * as React from "react";
import { Box } from "@mui/material";
import { ThemeProvider } from "@mui/material";
import CssBaseline from '@mui/material/CssBaseline';
import Menu from "../Menu";
import Header from "../Header";
import Content from "../Content";
import ModalAdmin from "../ModalAdmin";
import ModalUser from "../ModalUser";
import theme from "../../theme";
import { useMatch } from "react-router-dom";


const LoggedIn: React.FC = () =>  {

  return (
    <React.Fragment>
      <ThemeProvider theme={theme}>
      <CssBaseline />
        <Box sx={{
            backgroundColor: theme.palette.primary.main,
            color: theme.palette.secondary.main,
            height: "100%"
        }}>
          <Box sx={{
            backgroundColor: theme.palette.content.main,
            display: "flex",
            width: "100%",
            height: "100%"
          }}>

            <Menu />
            <Box sx={{ 
                width: "100%",
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between",
                alignItems: "center"
            }}>
              <Header />
              <Content />
            </Box>
          </Box>
        </Box>

      <ModalAdmin open={useMatch('/modalAdmin') !== null}/>
      <ModalUser open={useMatch('/modalUser') !== null}/>
        
      </ThemeProvider>
    </React.Fragment>
  );
}


export default LoggedIn;