// CreatePatientForm Component
import React, { Fragment, PureComponent } from 'react';
import PropTypes from 'prop-types';
import { noop } from 'node-noop';
import { Field, FormSection } from 'redux-form';

// Material Components
import { withStyles } from '@material-ui/core/styles';
import { Typography } from '@material-ui/core';
import Button from '@material-ui/core/Button';

// Components
import Alert from '../../Alert/Alert';
import PersonalDetailsFormFields from './Fields/PersonalDetailsFormFields';
import AddressFormFields from './Fields/AddressFormFields';
import NextOfKinFormFields from './Fields/NextOfKinFormFields';
import ContactFormFields from './Fields/ContactFormFields';
import SetInput from '../../SetInput/SetInput';

const styles = theme => ({
  title: {
    marginTop: theme.spacing.unit * 9,
    marginBottom: theme.spacing.unit * 6
  },
  submitButton: {
    marginTop: theme.spacing.unit * 8,
    marginBottom: theme.spacing.unit * 8
  }
});

class CreatePatientForm extends PureComponent {
  componentDidMount() {
    const { userUuid, setUserUuid } = this.props;
    if (!userUuid) {
      setUserUuid();
    }
  }

  render() {
    const {
      messages, handleSubmit, error, classes, userUuid
    } = this.props;
    return (
      <Fragment>
        <Typography
          variant="display1"
          color="inherit"
          className={classes.title}
        >
          {'Add patient details'}
        </Typography>
        {error && <Alert messages={messages} type={error} />}

        <form onSubmit={handleSubmit}>
          <Field
            name="recorder"
            setValue={userUuid}
            component={SetInput}
          />
          <PersonalDetailsFormFields />

          <FormSection name="person">
            <ContactFormFields />
            <AddressFormFields />
            <NextOfKinFormFields />
          </FormSection>

          <Button
            type="submit"
            color="primary"
            variant="contained"
            className={classes.submitButton}
          >
          continue
          </Button>
        </form>
      </Fragment>
    );
  }
}


CreatePatientForm.propTypes = {
  handleSubmit: PropTypes.func,
  messages: PropTypes.shape({}),
  error: PropTypes.string,
  classes: PropTypes.shape({})
};


CreatePatientForm.defaultProps = {
  handleSubmit: noop,
  messages: {
    default: 'default message'
  },
  error: undefined,
  classes: {}
};

export default withStyles(styles)(CreatePatientForm);