// material-ui
import {
    Grid, Box, Stack, Typography
} 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 * as DateUtils from "utils/DateUtils";
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 ProofForm = Loadable(React.lazy(() => import('./ProofForm')));
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'

const BackgroundHead = {
    backgroundImage: `url(${titleBackgroundImg})`,
    width: '100%',
    height: '100%',
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
    backgroundColor: '#0C489E',
    backgroundPosition: 'right'
}
// ==============================|| 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_PROOF_APP + "/" + params.id,
                onSuccess: (responseData) => {
                    responseData.data["phoneNumber"] = JSON.parse(responseData.data.contactTelNo).phoneNumber;
                    responseData.data["tel_countryCode"] = JSON.parse(responseData.data.contactTelNo).countryCode;

                    responseData.data["faxNumber"] = JSON.parse(responseData.data.contactFaxNo).faxNumber;
                    responseData.data["fax_countryCode"] = JSON.parse(responseData.data.contactFaxNo).countryCode;

                    responseData.data["issueNoStr"] = responseData.data.issueVolume + "/" + responseData.data.issueYear + " No. " + responseData.data.issueNo
                    responseData.data["issueDate"] = DateUtils.dateStr(responseData.data.issueDate);

                    responseData.data["groupType"] = responseData.data.groupTitle;

                    responseData.data["reviseDeadline"] = DateUtils.datetimeFieldFormat(responseData.data.reviseDeadline);
                    responseData.data["proofPaymentDeadline"] = DateUtils.datetimeFieldFormat(responseData.data.proofPaymentDeadline);
                    setRecord(responseData.data);
                }
            });
        }
    }

    return (
        !onReady ?
            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                <Grid item>
                    <LoadingComponent />
                </Grid>
            </Grid>
            :
            <Grid container sx={{ minHeight: '85vh', backgroundColor: "backgroundColor.default" }} direction="column" spacing={1} >
                <Grid item xs={12}>
                    <div style={BackgroundHead}>
                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                            <Typography ml={15} color='#FFF' variant="h4">Create Proof</Typography>
                        </Stack>
                    </div>
                </Grid>
                <MainCard
                    elevation={0}
                    border={false}
                    content={false}
                    sx={{
                        backgroundColor: "backgroundColor.default"
                    }}
                >

                    {/*row 1*/}
                    <Grid item xs={12} md={12} lg={12}>
                        <Grid container direction="row" justify="flex-start" alignItems="stretch" spacing={1}>
                            <Grid item xs={12} md={12} lg={8}>
                                <Box xs={12} ml={4} mt={3} sx={{ pb: 8.5, pt: 1, borderRadius: '10px', backgroundColor: "#fff" }}>
                                    <ApplicationDetails
                                        formData={record}
                                        style={{
                                            display: "flex",
                                            height: "100%",
                                            flex: 1
                                        }}
                                    />
                                </Box>
                            </Grid>
                            <Grid item xs={12} md={12} lg={3.85}>
                                <Box xs={12} ml={4} mt={3} sx={{ p: 1, borderRadius: '10px', backgroundColor: "#fff" }}>
                                    <GazetteDetails
                                        formData={record}
                                        style={{
                                            display: "flex",
                                            height: "100%",
                                            flex: 1
                                        }}
                                    />
                                </Box>
                            </Grid>
                        </Grid>
                    </Grid>
                    {/*row 2*/}
                    <Grid item xs={12} md={12} lg={12} sx={{ ml: 1 }}>
                        <MainCard elevation={0}
                            border={false}
                            content={false}
                            backgroundColor={"backgroundColor.default"}
                        >
                            <Box xs={12} ml={4} mt={3} sx={{ p: 1, borderRadius: '10px', backgroundColor: "#fff" }}>
                                <ProofForm
                                    formData={record}
                                />
                            </Box>
                            <br />
                        </MainCard>
                    </Grid>
                </MainCard>
            </Grid>

    );
};

export default Index;