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

const Quantities = ({
  label,
  options,
  fieldName,
  startAdornmentValue,
  endAdornmentValue,
  startAdornmentUnit,
  endAdornmentUnit,
  readOnly
}) => (
  <FormSection name={fieldName}>
    <Grid
      container
    >
      <Grid
        item
        xs={12}
      >
        {label}
      </Grid>

      <Grid
        item
        xs={5}
      >
        <Field
          readOnly={readOnly}
          name="value"
          type="number"
          startAdornment={startAdornmentValue}
          endAdornment={endAdornmentValue}
          component={TextInput}
        />
      </Grid>
      <Grid
        item
        xs={1}
      />
      <Grid
        item
        xs={5}
      >
        <Field
          readOnly={readOnly}
          name="unit"
          select
          placeholder="unit"
          startAdornment={startAdornmentUnit}
          endAdornment={endAdornmentUnit}
          component={TextInput}
        >
          {options.map(option => (
            <MenuItem key={option} value={option}>
              {option}
            </MenuItem>
          ))}
        </Field>
      </Grid>
    </Grid>
  </FormSection>
);

export default Quantities;