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";


export interface MWProps {
  section: number
}

const LoggedIn: React.FC<MWProps> = ({ section }) =>  {
  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 section={ section } />
            </Box>
          </Box>
        </Box>

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


export default LoggedIn;