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


const GazetteDetails = ({ formData }) => {

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

    React.useEffect(() => {
        if (formData)
            setData(formData);
    }, [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%'
                }
            }
        />;
    }


    return (
        <MainCard xs={12} md={12} lg={12}
            border={false}
            content={false}
            style={{ height: '100%' }}
        >

            <form style={{ height: '100%' }}>
                {/*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" }}>
                            Gazette Details
                        </Typography>
                    </Grid>
                </CardContent>

                {/*row 2*/}
                <Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} style={{ height: '100%' }}>
                    <Grid item xs={12} md={12}>
                        <Grid container direction="row" justifyContent="space-between"
                            alignItems="center">
                            <Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={4} lg={4}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel><Typography variant="h5">Issue Number:</Typography></FormLabel>
                                    </Grid>

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

                                    <Grid item xs={12} md={8} lg={8}>
                                        <DisplayField
                                            name="issueDate"

                                        />
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid container direction="row" justifyContent="space-between"
                            alignItems="center">
                            <Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={4} lg={4}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel><Typography variant="h5">Gazette Code:</Typography></FormLabel>
                                    </Grid>

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

                                    <Grid item xs={12} md={8} lg={8}>
                                        <DisplayField
                                            name="groupTitle"
                                        />
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                </Grid>


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

export default GazetteDetails;
