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

// import { useFormik } from 'formik';
import * as React from "react";
import Loadable from 'components/Loadable';
const MainCard = Loadable(React.lazy(() => import('components/MainCard')));
import { useForm } from 'react-hook-form';
import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
import {ThemeProvider} from "@emotion/react";
// ==============================|| DASHBOARD - DEFAULT ||============================== //
const ApplicationDetailCard = ({
    formData,
    _onSubmit,
    handleDelete
}) => {

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

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

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

    const DisplayField = ({ name, rows, value, disabled = false }) => {
        return <TextField
            fullWidth
            disabled={disabled}
            inputProps={{ style: {fontSize: '1.1rem'}}}
            InputProps={{
                style: {
                    minHeight:'42.5px',
                    maxHeight: '50vh',
                    padding: '0 0 0 0',
                    height: 'fit-content',
                    boxSizing: "inherit"},
            }}
            sx={{ padding: '10.5px 14px 10.5px 12px'}}
            {...register(name,
                {
                    value: value,
                })}
            multiline
            minRows={rows}
            maxRows={6}
        />;
    }
    const { register, handleSubmit } = useForm()
    return (
        <MainCard
            id={"emailTemplateMainCard"}
            border={false}
            content={false}
        >
            <Typography variant="h4" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
                Maintain Email Template
            </Typography>
            <form onSubmit={handleSubmit(_onSubmit)}>
                <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>Email Key:</FormLabel>
                                    </Grid>
                                    <Grid item xs={12} md={9} lg={9}>
                                        <DisplaySelection

                                        />
                                    </Grid>
                                </Grid>
                            </Grid> */}
                            <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 required>Key:</FormLabel>
                                    </Grid>
                                    <Grid item xs={12} md={9} lg={9}>
                                        <DisplayField
                                            name={"tempKey"}
                                            value={formData?.tempKey}
                                        />
                                    </Grid>
                                </Grid>
                            </Grid>
                            <Grid item xs={12} md={5} lg={5} sx={{ mb: 1 }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel>Description:</FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={9} lg={9}>
                                        <FormControl variant="outlined" fullWidth disabled >
                                            <DisplayField
                                                name="description"
                                                value={formData?.description}
                                                rows={2}
                                            />
                                        </FormControl>
                                    </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={1.5} lg={1.5}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel>Params:</FormLabel>
                                    </Grid>
                                    <Grid item xs={12} md={10.5} lg={10.5}>
                                        <DisplayField
                                            name="params"
                                            value={formData?.params}
                                        />
                                    </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={1.5} lg={1.5}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel>Subject (Cht):</FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={10.5} lg={10.5}>
                                        <DisplayField
                                            name="subjectCht"
                                            value={formData?.subjectCht}
                                            rows={2}
                                        />
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid container direction="row" justifyContent="space-between"
                            alignItems="center" sx={{ mb: 1 }}>
                            <Grid item xs={12} md={1.5} lg={1.5}
                                sx={{ display: 'flex', alignItems: 'center' }}>
                                <FormLabel>Content (Cht):</FormLabel>
                            </Grid>

                            <Grid item xs={12} md={10.5} lg={10.5}>
                                <DisplayField
                                    name="contentCht"
                                    value={formData?.contentCht}
                                    rows={4}
                                />
                            </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={1.5} lg={1.5}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel>Subject (Chs):</FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={10.5} lg={10.5}>
                                        <DisplayField
                                            name="subjectChs"
                                            value={formData?.subjectChs}
                                            rows={1}
                                        />
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid container direction="row" justifyContent="space-between"
                            alignItems="center" sx={{ mb: 1 }}>
                            <Grid item xs={12} md={1.5} lg={1.5}
                                sx={{ display: 'flex', alignItems: 'center' }}>
                                <FormLabel>Content (Chs):</FormLabel>
                            </Grid>

                            <Grid item xs={12} md={10.5} lg={10.5}>
                                <DisplayField
                                    name="contentChs"
                                    value={formData?.contentChs}
                                    rows={4}
                                />
                            </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={1.5} lg={1.5}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel>Subject (Eng):</FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={10.5} lg={10.5}>
                                        <DisplayField
                                            name="subjectEng"
                                            value={formData?.subjectEng}
                                            rows={1}
                                        />
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid container direction="row" justifyContent="space-between"
                            alignItems="center" sx={{ mb: 1 }}>
                            <Grid item xs={12} md={1.5} lg={1.5}
                                sx={{ display: 'flex', alignItems: 'center' }}>
                                <FormLabel>Content (Eng):</FormLabel>
                            </Grid>

                            <Grid item xs={12} md={10.5} lg={10.5}>
                                <DisplayField
                                    name="contentEng"
                                    value={formData?.contentEng}
                                    rows={4}
                                />
                            </Grid>
                        </Grid>
                    </Grid>

                    {/*bottom button*/}
                    <Grid item s={12} md={12} lg={12} sx={{ mb: 3 }} alignItems={"end"} justifyContent="center">
                        <Grid container maxWidth justifyContent="flex-end">
                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                            <Grid item sx={{ ml: 3, mr: 3 }}>
                                <Button
                                    color="delete"
                                    variant="contained"
                                    onClick={handleDelete}
                                >
                                    Delete
                                </Button>
                            </Grid>
                            <Grid item sx={{ ml: 3, mr: 3 }}>
                                <Button
                                    variant="contained"
                                    type="submit"
                                >
                                    Save
                                </Button>
                            </Grid>
                            </ThemeProvider>
                        </Grid>
                    </Grid>
                </Grid>
            </form>
        </MainCard>
    );
};

export default ApplicationDetailCard;
