import React, { Fragment, PureComponent } from 'react';

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

import ObservationsSection from './ObservationsSection/ObservationsSection';
import DiagnosesSection from './DiagnosesSection/DiagnosesSection';
import PrescriptionsSection from './PrescriptionsSection/PrescriptionsSection';
import TextSection from './TextSection';
import green from '../../../../style/theme/colors/green';

const styles = theme => ({
  submitButton: {
    marginTop: theme.spacing.unit * 8,
    marginBottom: theme.spacing.unit * 8
  },
  medicalConditions: {
    marginLeft: theme.spacing.unit * 10,
    marginRight: theme.spacing.unit * 10
  },
  addButtonText: {
    display: 'inline-block'
  },
  addButton: {
    color: green[200],
    cursor: 'pointer'
  }
});


class InitialForm extends PureComponent {
  componentDidMount() {
    const {
      change, patient, recorder, encounter
    } = this.props;
    change('patient', patient);
    change('clinician', recorder);
    change('diagnosis', [{
      patient, recorder, asserter: recorder, encounter
    }]);
  }

  render() {
    const {
      handleSubmit,
      messages,
      error,
      classes,
      recorder,
      patient,
      encounter,
      handlePrescriptionChange,
      handleObservationChange,
      addObservation,
      addPrescription,
      change
    } = this.props;
    return (
      <Fragment>
        <form onSubmit={handleSubmit}>
          <ObservationsSection
            checked={addObservation}
            handleChange={() => { handleObservationChange(change); }}
            classes={classes}
          />

          <TextSection
            title="What's the problem?"
            label="add label here"
            placeholder="put placeholder"
            fieldname="problem"
            multiline
          />

          <DiagnosesSection
            classes={classes}
            encounter={encounter}
            recorder={recorder}
            patient={patient}
          />

          <TextSection
            title="What's the plan?"
            label="add label here"
            placeholder="put placeholder"
            fieldname="plan"
            multiline
          />

          <PrescriptionsSection
            checked={addPrescription}
            encounter={encounter}
            handlePrescriptionChange={handlePrescriptionChange(change)}
            classes={classes}
          />

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

export default withStyles(styles)(InitialForm);