// CreateUserForm Component
import React, { Fragment } from 'react';
import {
  Field, FormSection
} from 'redux-form';

// Material Components
import Grid from '@material-ui/core/Grid';
import { Typography } from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
import TextInput from '../TextInput/TextInput';

import MoreVertical from '../MoreVertical/MoreVertical';
import Quantities from '../Quantities/Quantities';
import CheckboxInput from '../CheckboxInput/CheckboxInput';

const units = [
  'mg',
  'micrograms',
  'g',
  'tablet',
  'drops',
  'puffs',
  'units'
];

const duration = [
  'day',
  'week',
  'month'
];

export default ({ fields, meta: { error, submitFailed }, classes }) => (
  <ul>
    {fields.map((medication, index) => (
      <Fragment>
        <li className={classes.list} key={index}>
          <Grid
            container
            justify="space-between"
            alignItems="center"
          >
            <Grid
              item
              xs={9}
            >
              <Field
                name={`${medication}.medication.codification`}
                type="text"
                label="Drug Name"
                component={TextInput}
              />
            </Grid>
            <MoreVertical
              fields={fields}
              menuItems={[{ text: 'delete', index }]}
            />
          </Grid>

          <FormSection name={`${medication}.dose`}>
            <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"
            />
            <Field
              name="asNeeded"
              color="primary"
              component={CheckboxInput}
            />
          </FormSection>


        </li>
        <hr className={classes.hr} />
      </Fragment>
    ))}

    <li className={classes.list}>

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


      {submitFailed && error && (
      <span>
        {error}
      </span>
      )}
    </li>
  </ul>
);