// material-ui
import {
    Box,
    //Box,
    //Button,
    Grid, Typography,
} from '@mui/material';
import MainCard from "../../components/MainCard";
import InnerTab from "./InnerTab";
import LoadingComponent from "../extra-pages/LoadingComponent";
import * as React from "react";
import {useEffect, useState} from "react";
import {LIONER_FORM_THEME, CARD_MAX_WIDTH} from "../../themes/themeConst";
import {ThemeProvider} from "@emotion/react";

// ==============================|| DASHBOARD - DEFAULT ||============================== //


const MaintainPage = () => {
    const [onReady, setOnReady] = useState(false);

    useEffect(() => {
        setOnReady(true);
    }, []);

    return (
        !onReady ?
            <LoadingComponent/>
            :
            <Grid container rowSpacing={3} columnSpacing={2.75}>
                <Grid item xs={12} md={12} lg={12}>
                    <Grid container justifyContent="flex-start" alignItems="center">
                        <Grid item xs={12} sx={{mt:-1, mb: -2.25}} >
                            <Box sx={{ display: 'flex', alignItems: 'center'}}>
                                <Typography align="center" variant="h5" >
                                    Application Reminders
                                </Typography>
                            </Box>
                        </Grid>
                    </Grid>
                </Grid>

                {/*row 1*/}
                <Grid item xs={12} md={12} lg={12}>
                    <MainCard elevation={0}
                              content={false}
                              sx={{width:CARD_MAX_WIDTH}}
                    >
                        <Box sx={{borderBottom: 1, borderColor: 'divider'}}>
                            <ThemeProvider theme={LIONER_FORM_THEME}>
                            <InnerTab
                                isReminder={true}
                            />
                            </ThemeProvider>
                        </Box>
                    </MainCard>
                </Grid>

                <Grid item xs={12} md={12} lg={12}>
                    <Grid container justifyContent="flex-start" alignItems="center">
                        <Grid item xs={12} sx={{mt: -2.25, mb: -2.25}} >
                            <Box sx={{ display: 'flex', alignItems: 'center'}}>
                                <Typography align="center" variant="h5" >Announcement Reminders</Typography>
                            </Box>
                        </Grid>
                    </Grid>
                </Grid>

                {/*row 2*/}
                <Grid item xs={12} md={12} lg={12}>
                    <MainCard elevation={0}
                              content={false}
                              sx={{width:CARD_MAX_WIDTH}}
                    >
                        <Box sx={{borderBottom: 1, borderColor: 'divider'}}>
                            <ThemeProvider theme={LIONER_FORM_THEME}>
                            <InnerTab
                                isReminder={false}
                            />
                            </ThemeProvider>
                        </Box>
                    </MainCard>
                </Grid>
            </Grid>
    );
};

export default MaintainPage;
