import React, { Fragment } from 'react';
import { FieldArray } from 'redux-form';
import { withStyles } from '@material-ui/core/styles';
import FormTitle from '../../../Titles/FormTitle';

import renderPrescriptions from './renderPrescriptions';

const PerscriptionsFormFields = ({
  checked, handlePrescriptionChange, classes, encounter
}) => (
  <Fragment>

    <FormTitle
      title="Add Prescription"
      switchable
      checked={checked}
      onChange={() => handlePrescriptionChange(checked ? '' : [{ encounter }])}
    />

    {checked ? (
      <FieldArray
        name="prescriptions"
        props={{ classes, encounter }}
        component={renderPrescriptions}
      />
    ) : null}

  </Fragment>
);

export default PerscriptionsFormFields;