// material-ui
import {
    FormControl,
    Grid,
    Typography,
    FormLabel,
    OutlinedInput,
    Button,
    // 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';
// ==============================|| 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, width, value, rows = 1, disabled = false }) => {
        return <OutlinedInput
            fullWidth
            multiline
            disabled={disabled}
            size="small"
            // onChange={formik.handleChange}
            {...register(name,
                {
                    value: value,
                })}
            id={name}
            name={name}
            variant="outlined"
            maxRows={6}
            rows={rows}
            sx={
                {
                    "& .Mui-disabled": {
                        WebkitTextFillColor: "#000000",
                        background: "#f8f8f8",
                    },
                    // "& .MuiInputBase-input.Mui-disabled": {
                    //     WebkitTextFillColor: "#000000",
                    //     background: "#f8f8f8",
                    // },
                    width: width ? width : '100%'
                }
            }
        />;
    }

    const { register, handleSubmit } = useForm()

    

    // const DisplaySelection = ({ name = "test", value = "", onChange }) => {
    //     return <Autocomplete
    //         {...register(name)}
    //         disablePortal
    //         id={name}
    //         options={formData}
    //         vale={value}
    //         onChange={onChange}
    //         renderInput={(params) => (
    //             <TextField {...params}
    //                 InputLabelProps={{
    //                     shrink: true
    //                 }}
    //             />
    //         )}
    //     />
    // }
    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}
                                            />
                                        </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={6} lg={6} sx={{ mb: 1 }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel>Subject (Cht):</FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={9} lg={9}>
                                        <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={6} lg={6} sx={{ mb: 1 }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel>Subject (Chs):</FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={9} lg={9}>
                                        <DisplayField
                                            name="subjectChs"
                                            value={formData?.subjectChs}
                                            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 (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={6} lg={6} sx={{ mb: 1 }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel>Subject (Eng):</FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={9} lg={9}>
                                        <DisplayField
                                            name="subjectEng"
                                            value={formData?.subjectEng}
                                            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 (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">
                            <Grid item sx={{ ml: 3, mr: 3 }}>
                                <Button
                                    size="large"
                                    color="error"
                                    variant="contained"
                                    onClick={handleDelete}
                                    sx={{
                                        textTransform: 'capitalize',
                                        alignItems: 'end'
                                    }}
                                >
                                    <Typography variant="h5">Delete</Typography>
                                </Button>
                            </Grid>
                            <Grid item sx={{ ml: 3, mr: 3 }}>
                                <Button
                                    size="large"
                                    variant="contained"
                                    type="submit"
                                    sx={{
                                        textTransform: 'capitalize',
                                        alignItems: 'end'
                                    }}
                                >
                                    <Typography variant="h5">Save</Typography>
                                </Button>
                            </Grid>
                        </Grid>
                    </Grid>
                </Grid>
            </form>
        </MainCard>
    );
};

export default ApplicationDetailCard;