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

import { Field } from 'redux-form';

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

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 findCategoryName = value => categories.filter(category => category.value === value)[0].name;

const renderDiagnoses = ({
  fields, meta: { error, submitFailed }, classes, diagnosis
}) => (
  <ul>
    {fields.map((diagnose, index) => (
      <Fragment>
        <li className={classes.list} key={index}>
          <Grid
            container
            alignItems="baseline"
          >
            <Grid
              item
              xs={2}
            >
              <Field
                name={`${diagnose}.passport`}
                color="primary"
                component={CheckboxInput}
              />
            </Grid>
            <Grid
              item
              xs={10}
            >
              {(diagnosis[index].codification) ? (
                <Fragment>
                  {diagnosis[index].codification.name && (
                  <p>
                    {diagnosis[index].codification.name}
                  </p>
                  )}
                  {diagnosis[index].codification.category && (
                  <p>
                    {findCategoryName(diagnosis[index].codification.category)}
                  </p>
                  )
              }
                </Fragment>) : null}
            </Grid>
          </Grid>
        </li>
      </Fragment>
    ))}
  </ul>
);

export default renderDiagnoses;