import React, { Fragment, } from 'react';

import { Field } from 'redux-form';

import { withStyles } from '@material-ui/core/styles';
import { Typography, Grid } from '@material-ui/core';
import MenuItem from '@material-ui/core/MenuItem';
import AddIcon from '@material-ui/icons/Add';
import MoreVertical from '../../../MoreVertical/MoreVertical';
import TextInput from '../../../TextInput/TextInput';


const categories = [{ name: 'Certain infectious or parasitic diseases', value: '1' },
  { name: 'Neoplasms', value: '2' },
  { name: 'Diseases of the blood or blood-forming organs', value: '3' },
  { name: 'Diseases of the immune system', value: '4' },
  { name: 'Endocrine, nutritional or metabolic diseases', value: '5' },
  { name: 'Mental, behavioural or neurodevelopmental disorders', value: '6' },
  { name: 'Sleep-wake disorders', value: '7' },
  { name: 'Diseases of the nervous system', value: '8' },
  { name: 'Diseases of the visual system', value: '9' },
  { name: 'Diseases of the ear or mastoid process', value: 'A' },
  { name: 'Diseases of the circulatory system', value: 'B' },
  { name: 'Diseases of the respiratory system', value: 'C' },
  { name: 'Diseases of the digestive system', value: 'D' },
  { name: 'Diseases of the skin', value: 'E' },
  { name: 'Diseases of the musculoskeletal system or connective tissue', value: 'F' },
  { name: 'Diseases of the genitourinary system', value: 'G' },
  { name: 'Conditions related to sexual health', value: 'H' },
  { name: 'Pregnancy, childbirth or the puerperium', value: 'J' },
  { name: 'Certain conditions originating in the perinatal period', value: 'K' },
  { name: 'Developmental anomalies', value: 'L' },
  { name: 'Symptoms, signs or clinical findings, not elsewhere classified', value: 'M' },
  { name: 'Injury, poisoning or certain other consequences of external causes', value: 'N' },
  { name: 'External causes of morbidity or mortality', value: 'P' },
  { name: 'Factors influencing health status or contact with health services', value: 'Q' }
];

const renderDiagnoses = ({
  fields, meta: { error, submitFailed }, classes, recorder, patient, encounter,
}) => (
  <ul>
    {fields.map((diagnose, index) => (
      <Fragment>
        <li className={classes.list} key={index}>
          <Grid
            container
            justify="space-between"
            alignItems="center"
          >
            <Grid
              item
              xs={9}
            >
              <Field
                name={`${diagnose}.codification.name`}
                type="text"
                label="Name"
                placeholder="Add diagnosis here"
                component={TextInput}
              />
            </Grid>
            <MoreVertical
              fields={fields}
              menuItems={[{ text: 'delete', index }]}
            />

            <Field
              name={`${diagnose}.codification.category`}
              select
              label="Category"
              fullWidth
              component={TextInput}
            >
              {categories.map(option => (
                <MenuItem key={option.name} value={option.value}>
                  {option.name}
                </MenuItem>
              ))}
            </Field>


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

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

  </ul>
);

export default renderDiagnoses;