import React, { Fragment } from 'react';

import { FormSection, Field } 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 units = [
  'mg',
  'micrograms',
  'g',
  'tablet',
  'drops',
  'puffs',
  'units'
];

const duration = [
  'day',
  'week',
  'month'
];
const renderPrescriptions = ({
  fields, meta: { error, submitFailed }, classes
}) => (
  <ul>
    {fields.map((prescription, index) => (
      <Fragment>
        <li className={classes.list} key={index}>
          <Grid
            container
            justify="space-between"
            alignItems="center"
          >
            <Grid
              item
              xs={9}
            >
              <Field
                readOnly
                name={`${prescription}.codification`}
                type="text"
                label="Drug name"
                component={TextInput}
              />
            </Grid>

            <FormSection name={`${prescription}.dose`}>
              <Field
                readOnly
                name="asNeeded"
                color="primary"
                component={CheckboxInput}
              />
                As required
              <Quantities
                readOnly
                label="Dosage"
                options={units}
                startAdornmentUnit="unit"
                fieldName="doseQuantity"
              />
              <Quantities
                readOnly
                label="How often"
                options={duration}
                endAdornmentValue="times"
                startAdornmentUnit="per"
                fieldName="rateQuantity"
              />
              <Quantities
                readOnly
                label="Duration"
                startAdornmentValue="for"
                options={duration}
                fieldName="durationQuantity"
              />

            </FormSection>
            <Field
              readOnly
              name={`${prescription}.note`}
              type="text"
              label="Other informations"
              component={TextInput}
            />
          </Grid>
        </li>
      </Fragment>
    ))}
  </ul>
);

export default renderPrescriptions;