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

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

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

const UserSearchPage_Individual = () => {

    const [searchCriteria, setSearchCriteria] = React.useState({});
    const [onReady, setOnReady] = React.useState(false);
    const [onGridReady, setGridOnReady] = React.useState(false);

    React.useEffect(() => {
        if (Object.keys(getSearchCriteria(window.location.pathname)).length>0){
            setSearchCriteria(getSearchCriteria(window.location.pathname))
        }else{
            localStorage.setItem('searchCriteria',"")
            setSearchCriteria({
                dateTo: DateUtils.dateValue(new Date()),
                dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)),
            })
        }
    }, []);

    React.useEffect(() => {
        if(Object.keys(searchCriteria).length>0){
            setOnReady(true);
        }
    }, [searchCriteria]);

    function applySearch(input) {
        setGridOnReady(true);
        setSearchCriteria(input);
        localStorage.setItem('searchCriteria', JSON.stringify({path:window.location.pathname,tab:"application",data:input}))
    }

    function applyGridOnReady(input) {
        setGridOnReady(input);
    }

    return (
         !onReady ?
            <Grid container sx={{ height: '100%' }} direction="column" justifyContent="center" alignItems="center">
                <Grid item>
                    <LoadingComponent />
                </Grid>
            </Grid>
            :
            <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}
                    onGridReady={onGridReady}
                    />
                </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}
                                applyGridOnReady={applyGridOnReady}
                                applySearch={applySearch}
                            />
                        </div>
                    </MainCard>
                </Grid>

            </Grid>

    );
};

export default UserSearchPage_Individual;
