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

import { useFormik } from 'formik';
import * as React from "react";
import * as DateUtils from "utils/DateUtils"
import { useParams } from "react-router-dom";
import Loadable from 'components/Loadable';
const MainCard = Loadable(React.lazy(() => import('components/MainCard')));
import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
import FileList from "components/FileList"
// ==============================|| DASHBOARD - DEFAULT ||============================== //
const ApplicationDetailCard = ({ formData, setBackButtonPos }) => {

    const params = useParams();

    const [data, setData] = React.useState({});
    //const [proofId, setProofId] = React.useState();

    React.useEffect(() => {
        if (formData) {
            setData(formData);
            //setProofId(formData.id);
        }
    }, [formData]);

    const formik = useFormik({
        enableReinitialize: true,
        initialValues: data,
    });

    const DisplayField = ({ name, width }) => {
        return <TextField
            fullWidth
            disabled
            size="small"
            onChange={formik.handleChange}
            id={name}
            name={name}
            value={formik.values[name]}
            variant="outlined"
            sx={
                {
                    "& .MuiInputBase-input.Mui-disabled": {
                        WebkitTextFillColor: "#000000",
                        background: "#f8f8f8",
                    },
                    width: width ? width : '100%'
                }
            }
        />;
    }

    function currencyFormat(num) {
        let val = num ? num : 0;
        return val.toLocaleString('en-US', {
            minimumFractionDigits: 2
        });
    }
    
    React.useEffect(()=>{
        if (document.getElementById("applicationDetailsMainCard")) setBackButtonPos(`${document.getElementById("applicationDetailsMainCard")?.getBoundingClientRect().left / 2}px`)
    },[document.getElementById("applicationDetailsMainCard")])

    return (
        <MainCard
            id={"applicationDetailsMainCard"}
            border={false}
            content={false}
        >
            <Typography variant="h5" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
                Public Notice: Proofreading Reply
            </Typography>
            <form>
                <Grid container direction="column">
                    <Grid item xs={12} md={12} lg={12}>
                        <Grid container direction="row" justifyContent="space-between"
                            alignItems="center">
                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel>App No.:</FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={9} lg={9}>
                                        <DisplayField name="appNo" />
                                    </Grid>
                                </Grid>
                            </Grid>
                            <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
                                <Grid container alignItems={"left"}>
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel>Status:</FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={9} lg={9} sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormControl variant="outlined">
                                            {StatusUtils.getStatusByText(data.appStatus)}
                                        </FormControl>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid container direction="row" justifyContent="space-between"
                            alignItems="center">
                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel>Applicant:</FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={9} lg={9}>
                                        <FormControl variant="outlined" fullWidth disabled >
                                            {data.orgId === null ?
                                                <DisplayField name="contactPerson" />
                                                :
                                                <DisplayField name="applicant" />
                                            }
                                        </FormControl>
                                    </Grid>
                                </Grid>
                            </Grid>
                            <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel>Issue No:</FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={9} lg={9}>
                                        <DisplayField name="issueNoStr" />
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid container direction="row" justifyContent="space-between"
                            alignItems="center">
                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel>Contact Person:</FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={9} lg={9}>
                                        <DisplayField name="contactPerson" />

                                    </Grid>
                                </Grid>
                            </Grid>
                            <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel>Issue Date:</FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={9} lg={9}>
                                        <DisplayField name="issueDateStr" />
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                        {/* <Grid container direction="row" justifyContent="space-between"
                            alignItems="center">
                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1, }}>
                                <Grid container alignItems="left">
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel>Remarks:</FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={9} lg={9}>
                                        <Stack direction="row">
                                            <DisplayField name="appRemarks" />
                                        </Stack>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid> */}

                        <Grid container direction="row" justifyContent="space-between"
                            alignItems="center">

                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1, }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={12} lg={12} sx={{ display: 'flex', alignItems: 'center' }}>
                                        <Typography>Print file：</Typography>
                                    </Grid>
                                </Grid>
                                <FileList
                                    refId={params.id}
                                    refType={"proof"}
                                    dateHideable={true}
                                    disablePagination
                                    disableSelectionOnClick
                                    disableColumnMenu
                                    disableColumnSelector
                                    hideFooter
                                />
                            </Grid>

                            <Grid item xs={12} md={4} lg={4} sx={{ mb: 1, }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={12} lg={12}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <Typography>Deadline for payment and reply：</Typography>
                                    </Grid>
                                    <Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}>
                                        <Typography>{DateUtils.dateStr(data.returnBeforeDate)} Before 2:00 PM</Typography>
                                    </Grid>
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ mb: 1, display: 'flex', alignItems: 'center' }}>
                                        <Typography>Fee:</Typography>
                                    </Grid>
                                    <Grid item xs={12} md={9} lg={9} sx={{ mb: 1, display: 'flex', alignItems: 'center' }}>
                                        <Typography style={{ color: "blue", fontWeight: "bold", }}>{currencyFormat(data.fee)}</Typography>
                                    </Grid>
                                    <Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}>
                                        {
                                            formik.values.groupType == "A"
                                                ?
                                                <Typography>( {data.noOfPages} page x $6,552 )</Typography>
                                                :
                                                <Typography>( {data.length} cm x {data.colCount == 2 ? "$364 Double Column" : "$182 Single Column"} )</Typography>
                                        }
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>

                    </Grid>
                </Grid>
            </form>
        </MainCard>
    );
};

export default ApplicationDetailCard;