import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { InitialFormContainer, ReviewFormContainer, AddToPassportFormContainer }
  from '../../containers/ConsultationForms/ConsultationForms.state';

class ConsultationForm extends Component {
  constructor(props) {
    super(props);
    this.nextPage = this.nextPage.bind(this);
    this.previousPage = this.previousPage.bind(this);
    this.state = {
      page: 1,
      addObservation: false,
      addPrescription: false
    };
  }

  handleObservationChange = (change) => {
    this.setState(prevState => ({
      addObservation: !prevState.addObservation
    }), () => change('vitals', ''));
  }

  handlePrescriptionChange = change => (payload) => {
    this.setState(prevState => ({
      addPrescription: !prevState.addPrescription
    }), () => change('prescriptions', payload));
  }

  nextPage() {
    this.setState(prevState => ({
      page: prevState.page + 1
    }));
  }

  previousPage() {
    this.setState(() => ({
      page: 1
    }));
  }


  render() {
    const { page, addPrescription, addObservation } = this.state;
    return (
      <div>
        {page === 1 && (
        <InitialFormContainer
          onSubmit={this.nextPage}
          addPrescription={addPrescription}
          addObservation={addObservation}
          handlePrescriptionChange={this.handlePrescriptionChange}
          handleObservationChange={this.handleObservationChange}
        />
        )}
        {page === 2 && (
          <ReviewFormContainer
            previousPage={this.previousPage}
            onSubmit={this.nextPage}
          />
        )}
        {page === 3 && (
          <AddToPassportFormContainer
            previousPage={this.previousPage}
          />
        )}
      </div>
    );
  }
}

export default ConsultationForm;