import React from "react";
import fp from "lodash/fp";
import { bool, func, node, number, object, string } from "prop-types";
import { Field } from "redux-form";
import { TextField } from "material-ui";

TextFieldComponent.propTypes = {
  meta: object,
  input: object,
  parseOnBlur: func
};
TextFieldComponent.defaultProps = { parseOnBlur: fp.identity };

export function TextFieldComponent({ input, meta, parseOnBlur, ...custom }) {
  return (
    <TextField
      {...input}
      {...custom}
      errorText={!meta.active && meta.touched && meta.error}
      onBlur={fp.flow(fp.get("target.value"), parseOnBlur, input.onBlur)}
    />
  );
}

FormTextField.propTypes = {
  parse: func,
  format: func,
  validate: func,
  parseOnBlur: func,
  name: string.isRequired,

  type: string,
  readOnly: bool,
  disabled: bool,

  fullWidth: bool,
  multiLine: bool,

  hintText: node,
  floatingLabelText: node,
  rows: number,
  rowsMax: number
};

export default function FormTextField(props) {
  return <Field {...props} component={TextFieldComponent} />;
}