import React, { Fragment } from 'react';

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

import { withStyles } from '@material-ui/core/styles';
import { Typography, Grid } from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
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, encounter
}) => (
  <ul>
    {fields.map((prescription, index) => (
      <Fragment>
        <li className={classes.list} key={index}>
          <Grid
            container
            justify="space-between"
            alignItems="center"
          >
            <Grid
              item
              xs={9}
            >
              <Field
                name={`${prescription}.codification`}
                type="text"
                label="Drug name"
                component={TextInput}
              />
            </Grid>
            <MoreVertical
              fields={fields}
              menuItems={[{ text: 'delete', index }]}
            />

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

            </FormSection>
            <Field
              name={`${prescription}.note`}
              type="text"
              label="Other informations"
              component={TextInput}
            />


          </Grid>
        </li>
      </Fragment>
    ))}

    <Grid
      container
      justify="flex-start"
      alignItems="center"
      onClick={() => fields.push({ encounter })}
      className={classes.addButton}
    >
      <AddIcon />
      <Typography
        variant="subheading"
        color="inherit"
        className={classes.addButtonText}
      >
        add another
      </Typography>
    </Grid>

  </ul>
);

export default renderPrescriptions;