// material-ui
import {
    CardContent,
    Grid,
    Stack,
    TextField,
    FormLabel,
    Typography
} from '@mui/material';
import MainCard from "components/MainCard";
import * as React from "react";
import { useFormik } from 'formik';
// ==============================|| DASHBOARD - DEFAULT ||============================== //


const SearchPublicNoticeForm = ({ formData }) => {

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

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

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

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


    return (
        <MainCard xs={12} md={12} lg={12}
            border={false}
            content={false}>

            <form>
                {/*row 1*/}
                <CardContent sx={{ px: 2.5, pt: 3 }}>
                    <Grid item justifyContent="space-between" alignItems="center">
                        <Typography variant="h4" sx={{ mb: 2, borderBottom: "1px solid black" }}>
                            Application Details
                        </Typography>
                    </Grid>
                </CardContent>

                {/*row 2*/}
                <Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }}>
                    <Grid item xs={12} md={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={4} lg={4}
                                        // sx={{ display: 'flex', alignItems: 'center' }}
                                        >
                                        <FormLabel><Typography variant="h5">Application No:</Typography></FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={8} lg={8}>
                                        <DisplayField
                                            name='appNo'
                                        />
                                    </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={4} lg={4}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel><Typography variant="h5">Applicant:</Typography></FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={8} lg={8}>
                                        {
                                            formik.values?.orgId?
                                                <DisplayField
                                                    name={formik.values?.enCompanyName == "GLD" ? 'custName' : 'enCompanyName'}
                                                    dummyUser={true}
                                                />:
                                                <DisplayField
                                                    name={'contactPerson'}
                                                />
                                        }
                                    </Grid>
                                </Grid>
                            </Grid>
                            <Grid item xs={12} md={5} lg={5} sx={{ mb: 1 }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={4} lg={4}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel><Typography variant="h5">Contact Phone:</Typography></FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={8} lg={8}>
                                        <Stack direction="row">
                                            <DisplayField
                                                name='tel_countryCode'
                                                width='35%'
                                            />
                                            <DisplayField
                                                name='phoneNumber'
                                                width='65%'
                                            />
                                        </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={4} lg={4}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel><Typography variant="h5">Contact Person:</Typography></FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={8} lg={8}>
                                        <DisplayField
                                            name='contactPerson'
                                        />
                                    </Grid>
                                </Grid>
                            </Grid>
                            <Grid item xs={12} md={5} lg={5} sx={{ mb: 1 }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={4} lg={4}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel><Typography variant="h5">Contact Fax:</Typography></FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={8} lg={8}>
                                        <Stack direction="row">
                                            <DisplayField
                                                name='fax_countryCode'
                                                width='35%'
                                            />
                                            <DisplayField
                                                name='faxNumber'
                                                width='65%'
                                            />
                                        </Stack>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                </Grid>


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

export default SearchPublicNoticeForm;
