// CreateUserForm Component
import React, { Fragment, PureComponent } from 'react';
import PropTypes from 'prop-types';
import { noop } from 'node-noop';

// 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 NotListedField from './MedicalConditionsSections/NotListedField/NotListedField';

import BreathingSelectors from './Selectors/BreathingSelectors';
import CardivascularSelectors from './Selectors/CardiovascularSelectors';
import HormoneSelectors from './Selectors/HormoneSelectors';
import InfectionSelectors from './Selectors/InfectionSelectors';
import JointSelectors from './Selectors/JointSelectors';
import MoodSelectors from './Selectors/MoodSelectors';

import Section from './MedicalConditionsSections/Section/Section';

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
  },
  medicalConditions: {
    marginLeft: theme.spacing.unit * 10,
    marginRight: theme.spacing.unit * 10
  }
});

class MedicalConditions extends PureComponent {
  render() {
    const {
      messages, handleSubmit, error, classes, change, recorder, patient
    } = this.props;

    return (
      <Fragment>
        <Typography
          variant="display1"
          color="inherit"
          className={classes.title}
        >
          Have you ever had any?
        </Typography>
        {error && <Alert messages={messages} type={error} />}

        <form onSubmit={handleSubmit}>
          <Section
            name="Cardivascular problems"
            component={CardivascularSelectors}
            change={change}
            sectionId="page.conditions.cardivascularField"
            recorder={recorder}
            patient={patient}
          />

          <Section
            name="Hormone problems"
            component={HormoneSelectors}
            change={change}
            sectionId="page.conditions.hormoneField"
            recorder={recorder}
            patient={patient}
          />

          <Section
            name="Infection problems"
            component={InfectionSelectors}
            change={change}
            sectionId="page.conditions.infectionField"
            recorder={recorder}
            patient={patient}
          />

          <Section
            name="Breathing problems"
            component={BreathingSelectors}
            change={change}
            sectionId="page.conditions.breathingField"
            recorder={recorder}
            patient={patient}
          />

          <Section
            name="Joint problems"
            component={JointSelectors}
            change={change}
            sectionId="page.conditions.jointProblems"
            recorder={recorder}
            patient={patient}
          />

          <Section
            name="Mood problems"
            component={MoodSelectors}
            change={change}
            sectionId="page.conditions.moodField"
            recorder={recorder}
            patient={patient}
          />

          <NotListedField
            change={change}
            recorder={recorder}
            patient={patient}
          />

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


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


MedicalConditions.defaultProps = {
  handleSubmit: noop,
  messages: {
    default: 'default message'
  },
  error: undefined,
  classes: {}
};
export default withStyles(styles)(MedicalConditions);