import { FormControl, Stack, Box } from "@mui/material"; import PropTypes from "prop-types"; import Input from "../common/Input"; import SingleSelect from "../common/SingleSelect" import MultipleSelect from "../common/MultipleSelect"; const DiagnosisForm = ({ values, touched, handleBlur, errors, handleChange, setFieldValue, handleSubmit, }) => { DiagnosisForm.propTypes = { values: PropTypes.object.isRequired, touched: PropTypes.object.isRequired, errors: PropTypes.object.isRequired, handleBlur: PropTypes.func.isRequired, handleChange: PropTypes.func.isRequired, setFieldValue: PropTypes.func.isRequired, handleSubmit: PropTypes.func.isRequired, }; const statusSelect = ["Active", "Not Active"]; const isDefault = ["Yes", "No"]; return ( <form onSubmit={handleSubmit}> <Box sx={{ display: "flex", flexDirection: "row", justifyContent: "center", justifyItems: "center", gap: "25px", }} m={2} > <FormControl sx={{ top: "1px", display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "left", columnGap: "5px", gap: "5px", width: "100%", }} spacing={1} // flexWrap="wrap" // useFlexGap onSubmit={handleSubmit} > <h2>Ailment Name</h2> <Stack direction="row" spacing={1}> <Input label="Enter ailment Name" name="ailmentName" type="text" size="large" value={values.ailmentName} onChange={handleChange} onBlur={handleBlur} helperText={ errors.ailmentName && touched.ailmentName ? ( <span style={{ color: "red" }}>{errors.ailmentName}</span> ) : null } /> </Stack> <h2>Ailment Description</h2> <Stack direction="row" spacing={2}> <Input label="Enter Ailment Description" name="ailmentDesc" type="text" size="large" value={values.ailmentDesc} onChange={handleChange} onBlur={handleBlur} helperText={ errors.ailmentDesc && touched.ailmentDesc ? ( <span style={{ color: "red" }}>{errors.ailmentDesc}</span> ) : null } /> </Stack> <h2>Ailment Code</h2> <Stack direction="row" spacing={2}> <Input label="Enter Ailment Code" name="ailmentCode" type="text" size="large" value={values.ailmentCode} onChange={handleChange} onBlur={handleBlur} helperText={ errors.ailmentCode && touched.ailmentCode ? ( <span style={{ color: "red" }}>{errors.ailmentCode}</span> ) : null } /> </Stack> <h2>Is Active</h2> <Stack direction="row" spacing={2}> <SingleSelect arr={isDefault} label="status" name="isActive" value={values.isActive} onChange={(event, newValue) => { const syntheticEvent = { target: { name: "isActive", value: newValue, }, }; handleChange(syntheticEvent); }} onBlur={handleBlur} type="text" helperText={ errors.isActive && touched.isActive ? ( <span style={{ color: "red" }}>{errors.isActive}</span> ) : null } /> </Stack> </FormControl> </Box> </form> ); }; export default DiagnosisForm;