// material-ui
import {
    Grid,
    Typography,
    Stack,
    Box,
    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 { useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';

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'
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 navigate = useNavigate()

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

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

    React.useLayoutEffect(() => {
        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. " + zeroPad(responseData.data.issueVolume, 3)
                        + ", No. " + zeroPad(responseData.data.issueNo, 2);

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

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

    function zeroPad(num, places) {
        num = num ? num : 0;
        var zero = places - num.toString().length + 1;
        return Array(+(zero > 0 && zero)).join("0") + num;
    }

    // calculate back button position

    // const applicationDetailsRef = React.useCallback(node => {
    //     if (node === null) {
    //         return
    //     } else {
    //         setBackButtonLeftPos(`${node.getBoundingClientRect()?.left}px`)
    //     }
    // })

    const [backButtonPos, setBackButtonPos] = React.useState()
    const backButtonRef = React.useRef()
    React.useLayoutEffect(()=>{
        // console.log(applicationDetailsRef.current?.getBoundingClientRect())
        if (backButtonRef.current) backButtonRef.current.style.marginLeft = `${backButtonPos}`
    },[backButtonPos])

    // React.useEffect(()=>{
    //     if (backButtonRef.current) backButtonRef.current.style.marginLeft = `${backButtonLeftPos}`
    // }, [backButtonLeftPos])

    return (
        !onReady ?
            <LoadingComponent />
            :
            (
                    <Grid container sx={{ minHeight: '110vh', 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={{ pt: 2 }}>Proof Record</Typography>
                                </Stack>
                            </div>
                        </Grid>
                        <Grid item xs={12} width="100%">
                            <Button ref={backButtonRef} sx={{ml: backButtonPos, mt:2}} style={{ border: '2px solid' }} variant="outlined" onClick={()=>{navigate("/proof/search")}}>
                                <KeyboardBackspaceOutlinedIcon/>
                                <Typography variant="h4">Back</Typography>
                            </Button>
                        </Grid>
                        {/*row 1*/}
                        <Grid item xs={12} md={12} >
                            <Grid container justifyContent="flex-start" alignItems="center" >
                                <center>
                                    <Grid item xs={12} md={12} sx={{ pt: 2 }}>
                                        <Box  xs={12} md={12} sx={{ p: 4, border: '3px groove grey', borderRadius: '10px' }}>
                                            <ApplicationDetails
                                                setBackButtonPos={setBackButtonPos}
                                                formData={record}
                                                style={{
                                                    display: "flex",
                                                    height: "100%",
                                                    flex: 1
                                                }}
                                            />
                                        </Box>
                                    </Grid>
                                    <Grid item xs={12} md={12} sx={{ pt: 1, pb: 2 }}>
                                        <Box xs={12} md={12} sx={{ p: 4, border: '3px groove grey', borderRadius: '10px' }}>
                                            <ProofForm
                                                formData={record}
                                            />
                                        </Box>
                                    </Grid>
                                </center>
                            </Grid>
                        </Grid>
                        {/*row 2*/}
                    </Grid >

                    
            )


    );
};

export default Index;