import React from 'react';
import { Field } from 'redux-form';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import TextInput from '../../../../TextInput/TextInput';

const styles = theme => ({
  wrapper: {
    marginTop: theme.spacing.unit * 2
  }
});

const Observations = ({ classes }) => (
  <Grid
    container
    spacing={24}
    className={classes.wrapper}
  >
    <Grid item xs={6}>
      <Field
        name="heartRate"
        format={value => (value && value.value !== '' ? value.value : '')}
        parse={value => (value && value !== '' ? { value, unit: 'bpm' } : '')}
        type="number"
        label="Heart rate"
        endAdornment="bpm"
        component={TextInput}
      />
    </Grid>

    <Grid item xs={6}>
      <Field
        name="bodyTemperature"
        format={value => (value && value.value !== '' ? value.value : '')}
        parse={value => (value && value !== '' ? { value, unit: 'celcius' } : '')}
        type="number"
        label="Temperature"
        endAdornment="celsius"
        component={TextInput}
      />
    </Grid>

    <Grid item xs={6}>
      <Field
        name="bloodPressure"
        format={value => (value && value.value !== '' ? value.value : '')}
        parse={value => (value && value !== '' ? { value, unit: 'mmHg' } : '')}
        type="input"
        label="Blood pressure"
        endAdornment="mmHg"
        component={TextInput}
      />
    </Grid>

    <Grid item xs={6}>
      <Field
        name="respiratoryRate"
        format={value => (value && value.value !== '' ? value.value : '')}
        parse={value => (value && value !== '' ? { value, unit: 'bpm' } : '')}
        type="number"
        label="Respiratory rate"
        endAdornment="bpm"
        component={TextInput}
      />
    </Grid>


    <Grid item xs={6}>
      <Field
        name="oxygenSaturations"
        format={value => (value && value.value !== '' ? value.value : '')}
        parse={value => (value && value !== '' ? { value, unit: '%' } : '')}
        type="number"
        label="SP02"
        endAdornment="%"
        component={TextInput}
      />
    </Grid>

    <Grid item xs={6}>
      <Field
        name="fractionOfInspiredOxygen"
        format={value => (value ? value.value : '')}
        parse={value => (value && value !== '' ? { value, unit: '%' } : '')}
        type="number"
        endAdornment="%"
        label="Fi02"
        component={TextInput}
      />
    </Grid>


    <Grid item xs={6}>
      <Field
        name="bodyWeight"
        format={value => (value && value.value !== '' ? value.value : '')}
        parse={value => (value && value !== '' ? { value, unit: 'kg' } : '')}
        type="number"
        label="Weight"
        endAdornment="kg"
        component={TextInput}
      />
    </Grid>

    <Grid item xs={6}>
      <Field
        name="bodyHeight"
        format={value => (value && value.value !== '' ? value.value : '')}
        parse={value => (value && value !== '' ? { value, unit: 'cm' } : '')}
        type="number"
        label="Height"
        endAdornment="cm"
        component={TextInput}
      />
    </Grid>

    <Grid item xs={6}>
      <Field
        name="bmi"
        format={value => (value && value.value !== '' ? value.value : '')}
        parse={value => (value && value !== '' ? { value, unit: 'bmi' } : '')}
        type="number"
        label="BMI"
        endAdornment="bmi"
        component={TextInput}
      />
    </Grid>

    <Grid item xs={6}>
      <Field
        name="bloodGlucose"
        format={value => (value && value.value !== '' ? value.value : '')}
        parse={value => (value && value !== '' ? { value, unit: 'mg/dL' } : '')}
        type="number"
        label="Blood glucose"
        endAdornment="mg/dL"
        component={TextInput}
      />
    </Grid>

  </Grid>
);
export default withStyles(styles)(Observations);