import React, { Fragment } from 'react';

import { FormSection, Field, getFormValue } from 'redux-form';

import { withStyles } from '@material-ui/core/styles';
import { Grid } from '@material-ui/core';
import CheckboxInput from '../../../CheckboxInput/CheckboxInput';
import Quantities from '../../../Quantities/Quantities';
import TextInput from '../../../TextInput/TextInput';
import MoreVertical from '../../../MoreVertical/MoreVertical';

const renderPrescriptions = ({
  fields, meta: { error, submitFailed }, classes, prescriptions
}) => (
  <ul>
    {fields.map((prescription, index) => (
      <Fragment>
        <li className={classes.list} key={index}>
          <Grid
            container
            alignItems="baseline"
          >
            <Grid
              item
              xs={2}
            >
              <Field
                name={`${prescription}.passport`}
                color="primary"
                component={CheckboxInput}
              />
            </Grid>
            <Grid
              item
              xs={10}
            >
              <Fragment>
                {prescriptions[index].codification && (
                  <p>
                    {prescriptions[index].codification}
                  </p>
                )}
                {prescriptions[index].dose ? (
                  <Grid
                    container
                    justify="flex-start"
                    spacing={14}
                  >
                    {prescriptions[index].dose.doseQuantity && (
                    <Grid
                      item
                    >
                      <p>
                        {`${prescriptions[index].dose.doseQuantity.value} ${prescriptions[index].dose.doseQuantity.unit}`}
                      </p>
                    </Grid>
                    )}
                    {prescriptions[index].dose.rateQuantity && (
                    <Grid
                      item
                    >
                      <p>
                        {`${prescriptions[index].dose.rateQuantity.value} ${prescriptions[index].dose.rateQuantity.unit}`}
                      </p>
                    </Grid>
                    )}
                  </Grid>
                ) : null
                  }
              </Fragment>
            </Grid>
          </Grid>
        </li>
      </Fragment>
    ))}
  </ul>
);

export default renderPrescriptions;