import React, { useCallback } from 'react';
import MuiTextField from '@material-ui/core/TextField';
import { fieldToTextField, TextFieldProps } from 'formik-material-ui';
import { omit } from 'lodash';
import { useStyles } from './styles/form-item-styles';

export const FormTextField = (props: TextFieldProps) => {
  const {
    form: { setFieldValue },
    field: { name },
  } = props;

  const classes = useStyles();

  const onChange = useCallback(
    event => {
      const { value } = event.target;
      setFieldValue(name, value);
    },
    [setFieldValue, name]
  );
  return (
    <div className={classes.formItem}>
      <label className={classes.label}>{props.label}</label>
      <MuiTextField
        {...fieldToTextField(omit(props, 'label'))}
        onChange={onChange}
      />
    </div>
  );
};
