// material-ui
import * as React from "react";
import * as HttpUtils from "utils/HttpUtils";
import * as UrlUtils from "utils/ApiPathConst";
import * as DateUtils from "utils/DateUtils";

import {
    Grid,
} from '@mui/material';

import { useParams } from 'react-router-dom';
import Loadable from 'components/Loadable';
import { lazy } from 'react';
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
const AnnouncementForm = Loadable(lazy(() => import('./AnnouncementForm')));


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

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

    const [formData, setFormData] = React.useState({});
    const [isLoading, setLoding] = React.useState(true);

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

    const loadData = () => {
        setLoding(true);
        if (params.id > 0) {
            HttpUtils.get({
                url: `${UrlUtils.GET_ANNOUNCE}`+"/"+params.id,
                onSuccess: function (responseData) {
                    responseData["announceDate"] = DateUtils.datetimeFieldFormat(responseData.announceDate);
                    setFormData(responseData);
                }
            });
        }else{
            setFormData({"announceDate": DateUtils.datetimeFieldFormat(new Date())});   
        }
    };

    React.useEffect(() => {
        if (formData !== null && formData != {}) setLoding(false);
    }, [formData]);

    return (
        isLoading ?
            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                <Grid item>
                    <LoadingComponent />
                </Grid>
            </Grid>
            :
            <AnnouncementForm
                loadedData={formData}
            />
    );
};


export default CreateForm;
