// material-ui
import {
    Grid,
    Typography,
    Stack,
    Button
} from '@mui/material';
import * as UrlUtils from "utils/ApiPathConst";
import * as React from "react";
import * as HttpUtils from "utils/HttpUtils";
import * as DateUtils from "utils/DateUtils";
import * as FormatUtils from "utils/FormatUtils";
import { useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import ForwardIcon from '@mui/icons-material/Forward';

import Loadable from 'components/Loadable';
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
const ApplicationDetails = Loadable(React.lazy(() => import('./ApplicationDetails')));
const ProofForm = Loadable(React.lazy(() => import('./ProofForm')));
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
import MainCard from "../../../components/MainCard";
import {FormattedMessage} from "react-intl";
const BackgroundHead = {
    backgroundImage: `url(${titleBackgroundImg})`,
    width: '100%',
    height: '100%',
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
    backgroundColor: '#0C489E',
    backgroundPosition: 'right'
}
import {useIntl} from "react-intl";

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

const Index = () => {
    const params = useParams();
    const navigate = useNavigate()
    const intl = useIntl();
    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 + "/" + params.id,
                onSuccess: (responseData) => {
                    if (!responseData.data?.id) {
                        navigate("/proof/search");
                    }
                    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.issueYear
                        + " Vol. " + FormatUtils.zeroPad(responseData.data.issueVolume, 3)
                        + ", No. " + FormatUtils.zeroPad(responseData.data.issueNo, 2);

                    responseData.data["issueDateStr"] = DateUtils.dateFormat(responseData.data.issueDate, "D MMM YYYY (ddd)");

                    responseData.data["groupType"] = responseData.data.groupTitle;
                    responseData.data["action"] = responseData.data.replyDate ? responseData.data.action : true;
                    setRecord(responseData.data);
                }
            });
        }
    }

    return (
        !onReady ?
            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                <Grid item>
                    <LoadingComponent />
                </Grid>
            </Grid>
            :
            (
                <Grid container sx={{ width: '100%', backgroundColor: '#fff' }} direction="column"  justifyContent="flex-start" alignItems="center" >
                    <Grid item xs={12} width="100%">
                        <div style={BackgroundHead} width="100%">
                            <Stack direction="row" height='70px'>
                                <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }, pt:2}}>
                                    <FormattedMessage id="proofRecord"/>
                                </Typography>
                            </Stack>
                        </div>
                    </Grid>
                    <Grid item xs={12} width="100%">
                        <Button
                            aria-label={intl.formatMessage({id: 'back'})}
                            title={intl.formatMessage({id: 'back'})}
                            sx={{ mt: 2.5, ml: 3 }} style={{ border: '2px solid' }}
                            variant="outlined" onClick={() => { navigate("/proof/search") }}>
                            <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
                        </Button>
                    </Grid>
                    {/*row 1*/}
                    <Grid item xs={12} sm={12} md={12} lg={12} sx={{ width:'100%', mt:2, mb: -3}}>
                        <MainCard
                            sx={{
                                mr:2,
                                boxShadow: 1,
                                border: 1,
                                borderColor: '#DDD',
                            }}
                            border= '1px groove grey'
                        >
                            <ApplicationDetails
                                formData={record}
                            />
                        </MainCard>
                    </Grid>

                    {/*row 2*/}
                    <Grid item xs={12} sm={12} md={12} lg={12} sx={{ width:'100%', mt: 2, mb: 2}}>
                        <MainCard
                            sx={{
                                boxShadow: 1,
                                border: 1,
                                borderColor: '#DDD',
                            }}
                            border= '1px groove grey'
                            // sx={..._sx}
                        >
                            <ProofForm
                                formData={record}
                            />
                        </MainCard>
                    </Grid>
                </Grid >


            )


    );
};

export default Index;