// material-ui
import {
    Grid
} from '@mui/material';
import MainCard from "components/MainCard";
import * as React from "react";
import * as DateUtils from "utils/DateUtils";

import Loadable from 'components/Loadable';
const SearchForm = Loadable(React.lazy(() => import('./SearchPublicNoticeForm')));
const EventTable = Loadable(React.lazy(() => import('./SearchPublicNoticeTable')));

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

const UserSearchPage_Individual = () => {

    const [searchCriteria, setSearchCriteria] = React.useState({
        dateTo: DateUtils.dateValue(new Date()),
        dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)),
    });

    function applySearch(input) {
        setSearchCriteria(input);
    }

    return (
        <Grid container sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
            {/*row 1*/}
            <Grid item xs={12} md={12} lg={12} sx={{mb:-3}}>
                <SearchForm 
                applySearch={applySearch}
                searchCriteria={searchCriteria}
                />
            </Grid>
            {/*row 2*/}
            <Grid item xs={12} md={12} lg={12} >
                <MainCard elevation={0}
                          border={false}
                          content={false}
                          sx={{width: "-webkit-fill-available",height: "100%", minHeight:'100%'}}
                >
                    <div style={{height: '100%', width: '100%' }}>
                        <EventTable
                            autoHeight
                            searchCriteria={searchCriteria}
                        />
                    </div>
                </MainCard>
            </Grid>

        </Grid>

    );
};

export default UserSearchPage_Individual;