// material-ui
import {
    Grid,
} from '@mui/material';
import MainCard from "components/MainCard";
import * as UrlUtils from "utils/ApiPathConst";
import * as React from "react";
import * as HttpUtils from "utils/HttpUtils";
import { useParams } from "react-router-dom";

import Loadable from 'components/Loadable';
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
const ApplicationDetails = Loadable(React.lazy(() => import('./ApplicationDetails')));
//const GazetteDetails = Loadable(React.lazy(() => import('./GazetteDetails')));
const EventTable = Loadable(React.lazy(() => import('./DataGrid')));

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

const Index = () => {
    const params = useParams();

    const [record, setRecord] = React.useState();
    const [onReady, setOnReady] = React.useState(false);

    React.useEffect(() => {
        loadForm();
    }, []);

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


    const loadForm = () => {
        if(params.id > 0){

            HttpUtils.get({
                url: UrlUtils.GET_PUBLIC_NOTICE_APPLY_DETAIL+"/"+params.id,
                onSuccess:(responseData)=>{
                    setRecord(responseData);
                }
            });
        }
      }

    return (
        !onReady ?
            <LoadingComponent />
            :
            <Grid container sx={{ minHeight: '85vh', backgroundColor: '#eee' }} direction="column"  spacing={1} >
                {/*row 1*/}
                <Grid item xs={12} md={12} lg={12}>
                    <Grid container  spacing={1}>
                        <Grid item xs={12} md={12} lg={8}>
                            <ApplicationDetails
                                formData={record}
                            />
                        </Grid>
                        <Grid item xs={12} md={12} lg={4}>
                            <ApplicationDetails
                                formData={record}
                            />
                        </Grid>
                    </Grid>
                </Grid>
                {/*row 2*/}
                <Grid item xs={12} md={12} lg={12}>
                    <MainCard elevation={0}
                        border={false}
                        content={false}
                    >
                        <EventTable
                            recordList={record}
                        />
                    </MainCard>
                </Grid>
            </Grid>
    );
};

export default Index;