import { Grid, } from '@mui/material';
import { useState, useEffect, lazy } from "react";
import { useNavigate } from "react-router-dom";

import * as HttpUtils from "utils/HttpUtils";
import * as UrlUtils from "utils/ApiPathConst";
import Loadable from 'components/Loadable';
import { useParams } from "react-router-dom";
//const Pay = Loadable(lazy(() => import('./Pay')));
const LoadingComponent = Loadable(lazy(() => import('pages/extra-pages/LoadingComponent')));
const Pay_Creditor = Loadable(lazy(() => import('./Pay_Creditor')));
const Pay_Dn = Loadable(lazy(() => import('./Pay_DN')));
const Pay_Office = Loadable(lazy(() => import('./Pay_Office')));
const Pay_Online = Loadable(lazy(() => import('./Pay_Online')));
import { checkPaymentSuspension } from "utils/Utils";


const Index = () => {
    const params = useParams();
    const [onReady, setOnReady] = useState(false);
    const [record, setRecord] = useState({});
    const [paymentMethod, setPaymentMethod] = useState();
    const navigate = useNavigate()

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

    useEffect(() => {
        if (params.id > 0) {
            HttpUtils.get({
                url: UrlUtils.GET_PROOF_PAY + "/" + params.id,
                onSuccess: (responseData) => {
                    if (!responseData?.data?.id) {
                        navigate("/proof/search");
                    }
                    setRecord(responseData.data);
                    if(checkPaymentSuspension()){
                        setPaymentMethod("online")
                    }else{
                        setPaymentMethod(responseData.data.paymentMethod)
                    }
                },
                onError: () => {

                }
            });
        }
    }, []);


    return (
        !onReady ?
            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                <Grid item>
                    <LoadingComponent />
                </Grid>
            </Grid>
            :
            (
                record.creditor ?
                    <Pay_Creditor
                        record={record}
                    />
                    : (
                        paymentMethod == "demandNote" ?
                            <Pay_Dn
                                record={record}
                            />
                            : (
                                paymentMethod == "online" ?
                                    <Pay_Online
                                        record={record}
                                    />
                                    :
                                    <Pay_Office
                                        record={record}
                                    />
                            )
                    )
            )
    );

}

export default Index;