// material-ui
import {
    Grid,
    Typography,
    FormLabel,
    Button
} from '@mui/material';

import * as React from "react";
import * as FormatUtils from "utils/FormatUtils";
import * as PaymentStatus from "utils/statusUtils/PaymentStatus";
import * as DateUtils from "utils/DateUtils";
import Loadable from 'components/Loadable';
const MainCard = Loadable(React.lazy(() => import('components/MainCard')));
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
import DownloadIcon from '@mui/icons-material/Download';
import {useIntl} from "react-intl";
// ==============================|| DASHBOARD - DEFAULT ||============================== //
const PaymentDetails = ({ formData,doPrint,onDownload }) => {

    const intl = useIntl();
    const [data, setData] = React.useState({});
    const [onReady, setOnReady] = React.useState(false);
    // const { locale } = intl;

    React.useEffect(() => {
        if (formData != null && formData != undefined && Object.keys(formData).length > 0) {
            setData(formData);
        }
    }, [formData]);

    React.useEffect(() => {
        if (formData != null && formData != undefined && Object.keys(formData).length > 0) {
            setOnReady(data != {});
        }
    }, [data]);

    const getPaymentMethod=()=>{
        let paymentmethod = data.payload?.paymentdetail.paymentmethod;
        if("01" == paymentmethod) return "PPS";
        if("02" == paymentmethod || "03" == paymentmethod) return "Credit Card";
        if("04" == paymentmethod) return "FPS";
        return paymentmethod;
    }

    return (
        !onReady ?
            <LoadingComponent />
            :
            <MainCard elevation={0}
                border={false}
                content={false}
            >
                <Typography variant="h5" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
                    Payment Details
                </Typography>
                <form>
                    <Grid container>
                        <Grid item xs={12} md={12} >
                            <Grid container alignItems="center">
                                <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right", alignItems: 'center', color: "#000000" }}>
                                    <FormLabel sx={{ color: "#000000" }}>
                                        Status:
                                    </FormLabel>
                                </Grid>
                                <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
                                    <FormLabel sx={{ display: 'flex', alignItems: 'center', color: "#000000" }}>
                                        {PaymentStatus.getStatus_Eng(data.status)}
                                    </FormLabel>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Grid container >
                                <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                    <FormLabel sx={{ color: "#000000" }}>
                                    Payment No.:
                                    </FormLabel>
                                </Grid>
                                <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
                                    <FormLabel sx={{ color: "#000000" }}>
                                        {data.payload?.transactionid}
                                    </FormLabel>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Grid container >
                                <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                    <FormLabel sx={{ color: "#000000" }}>
                                        Payment Date:
                                    </FormLabel>
                                </Grid>
                                <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
                                    <FormLabel sx={{ color: "#000000" }}>
                                        {DateUtils.dateFormat(data.transDateStr, intl.formatMessage({id: "dateStrFormat"})) +" ("+intl.formatMessage({id: "dateStrFormat"})+")"}
                                    </FormLabel>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Grid container >
                                <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                    <FormLabel sx={{ color: "#000000" }}>
                                        Payment Time:
                                    </FormLabel>
                                </Grid>
                                <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
                                    <FormLabel sx={{ color: "#000000" }}>
                                        {data.transTimeStr + " (HH:MI:SS)"}
                                    </FormLabel>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Grid container >
                                <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                    <FormLabel sx={{ color: "#000000" }}>
                                        EGIS Reference No.:
                                    </FormLabel>
                                </Grid>
                                <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
                                    <FormLabel sx={{ color: "#000000" }}>
                                        {data.egisRefNo}
                                    </FormLabel>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Grid container >
                                <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                    <FormLabel sx={{ color: "#000000" }}>
                                        Payment Amount:
                                    </FormLabel>
                                </Grid>
                                <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
                                    <FormLabel sx={{ color: "#000000" }}>
                                        {"$ " + FormatUtils.currencyFormat(data.payload?.amount)}
                                    </FormLabel>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Grid container >
                                <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                    <FormLabel sx={{ color: "#000000" }}>
                                        Payment Method:
                                    </FormLabel>
                                </Grid>
                                <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
                                    <FormLabel sx={{ color: "#000000" }}>
                                        {getPaymentMethod()}
                                    </FormLabel>
                                </Grid>
                            </Grid>
                        </Grid>
                        {
                            data.status == "APPR"
                            ?
                                <Grid item xs={12} md={12}>
                                    <Grid container alignItems="center">
                                        <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                            <FormLabel sx={{ color: "#000000" }}>
                                                Payment Receipt:
                                            </FormLabel>
                                        </Grid>
                                        <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
                                            <Button className="printHidden" variant="contained" disabled={onDownload} sx={{ mt:2 }} onClick={doPrint}>
                                                <DownloadIcon/>
                                                <Typography sx={{fontSize: "16px"}}>Download</Typography>
                                            </Button>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            : null
                        }
                    </Grid>
                </form>
            </MainCard>
    );
};

export default PaymentDetails;