import * as React from "react";
import {Outlet} from 'react-router-dom'
import {useTheme} from '@mui/material/styles';
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 ModalAdmin from "./ModalAdmin";
import ModalUser from "./ModalUser";
import ModalEntities from "./ModalEntities";
import {useMatch} from "react-router-dom";

export default () => {
    const theme = useTheme()
    return (
        <React.Fragment>
            <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"
                    }}>
                        <Box sx={{
                            width: "100%",
                            height: "100vh",
                            display: "flex",
                            flexDirection: "column",
                            alignItems: "center",
                            overflow: "auto",
                            overflowY: "auto",
                            padding: "160px 5px"
                        }}>
                            <Outlet/>
                        </Box>
                    </Box>
                </Box>
            </Box>

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