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 ModalWindow from "../ModalWindow";
import theme from "../../theme";
import { useMatch } from "react-router-dom";
import useStore from "../../store";


const LoggedIn: React.FC = () =>  {
  const handleOpen = useStore((state) => state.handleOpen);
  const handleClose = useStore((state) => state.handleClose);

  const match = useMatch('/modal');
  match ? handleOpen() : handleClose()

  

  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>

        <ModalWindow />
        
      </ThemeProvider>
    </React.Fragment>
  );
}


export default LoggedIn;