import React, { Fragment } from 'react';
import { Field, FormSection } from 'redux-form';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import TextInput from '../../TextInput/TextInput';
import { FormattedMessage } from 'react-intl';

const styles = theme => ({
  wrapper: {
    marginTop: theme.spacing.unit * 2
  }
});

class AdditionalField extends React.Component {
  handleChange = ({ name }) => (evt) => {
    const { change, position } = this.props;
    change(`conditions[${position}][${name}]`, evt.currentTarget.value);
  };

  render() {
    const { position, classes } = this.props;
    return (
      <Grid
        item
        xs={10}
        className={classes.wrapper}
      >
        <FormattedMessage id="page.conditions.dateOfDiagnosis" />
        <Field
          name={`conditions[${position}][onsetDateTime]`}
          type="date"
          InputLabelProps={{
            shrink: true
          }}
          required
          label="Date of diagnosis"
          fullWidth
          onChange={this.handleChange({ name: 'onsetDateTime' })}
          component={TextInput}
        />

        <FormattedMessage id="page.conditions.addNotes" />
        <Field
          name={`conditions[${position}][note]`}
          type="input"
          label="Add notes"
          fullWidth
          onChange={this.handleChange({ name: 'note' })}
          component={TextInput}
        />
      </Grid>
    );
  }
}
export default withStyles(styles)(AdditionalField);