import React from 'react';
import { FormattedMessage } from 'react-intl';
import { makeStyles } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import TextField from '@material-ui/core/TextField';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles(theme => ({
  root: {
    width: theme.spacing(15),
  },
  inputMarginDense: {
    padding: '4px 8px',
  },
}));

const AnnotationFilterNumber = ({
  teamTask,
  query,
  onChange,
  onError,
}) => {
  const classes = useStyles();
  const [showErrorMsg, setShowErrorMsg] = React.useState(false);

  const getFieldValue = (field) => {
    const teamTaskValue = query.team_tasks.find(tt => tt.id.toString() === teamTask.node.dbid.toString());
    const { range } = teamTaskValue;
    const value = range ? range[field] : '';
    return value;
  };

  const handleFieldChange = (key, keyValue) => {
    const minNumber = getFieldValue('min');
    const maxNumber = getFieldValue('max');
    const range = { min: minNumber, max: maxNumber };
    if (key === 'min') {
      range.min = keyValue;
    } else if (key === 'max') {
      range.max = keyValue;
    }
    if (range.max !== '' && parseInt(range.min, 10) > parseInt(range.max, 10)) {
      setShowErrorMsg(true);
      onError((
        <FormattedMessage
          id="customFiltersManager.errorMessage"
          defaultMessage="First number should be less than second number"
          description="Message when user set range number with min value greater than max value"
        />
      ));
    } else {
      setShowErrorMsg(false);
      onError(null);
      onChange(['NUMERIC_RANGE'], { range });
    }
  };

  return (
    <Box display="flex" alignItems="center">
      <Box px={1}>
        <Typography component="span" variant="body2">
          <FormattedMessage id="numericRangeFilter.between" defaultMessage="between" />
        </Typography>
      </Box>
      <FormattedMessage id="customFiltersManager.enterNumber" defaultMessage="enter number">
        { placeholder => (
          <TextField
            classes={{ root: classes.root }}
            InputProps={{ classes: { inputMarginDense: classes.inputMarginDense } }}
            variant="outlined"
            size="small"
            placeholder={placeholder}
            value={getFieldValue('min')}
            onChange={(e) => { handleFieldChange('min', e.target.value); }}
            type="number"
            error={showErrorMsg}
          />
        )}
      </FormattedMessage>
      <Box px={1}>
        <Typography component="span" variant="body2">
          <FormattedMessage id="numericRangeFilter.and" defaultMessage="and" />
        </Typography>
      </Box>
      <FormattedMessage id="customFiltersManager.enterNumber" defaultMessage="enter number">
        { placeholder => (
          <TextField
            classes={{ root: classes.root }}
            InputProps={{ classes: { inputMarginDense: classes.inputMarginDense } }}
            variant="outlined"
            size="small"
            placeholder={placeholder}
            value={getFieldValue('max')}
            onChange={(e) => { handleFieldChange('max', e.target.value); }}
            type="number"
            error={showErrorMsg}
          />
        )}
      </FormattedMessage>
    </Box>
  );
};

export default AnnotationFilterNumber;

@@ -535,73 +535,8 @@
 s();
-%0A  const %5BshowErrorMsg, setShowErrorMsg%5D = React.useState(false);
 %0A%0A  
@@ -795,59 +795,74 @@
 nst 
-handleFieldChange = (key, keyValue) =%3E %7B%0A 
+%5BshowErrorMsg, setShowErrorMsg%5D = React.useState(false);%0A
   
- 
 const 
+%5B
 minN
@@ -862,27 +862,57 @@
 t %5BminNumber
- = 
+, setMinNumber%5D = React.useState(
 getFieldValu
@@ -919,28 +919,27 @@
 e('min')
+)
 ;%0A
-  
   const 
 maxNumbe
@@ -930,16 +930,17 @@
   const 
+%5B
 maxNumbe
@@ -944,32 +944,113 @@
 mber
- = getFieldValue('max');
+, setMaxNumber%5D = React.useState(getFieldValue('max'));%0A%0A  const handleFieldChange = (key, keyValue) =%3E %7B
 %0A   
@@ -1121,24 +1121,54 @@
 == 'min') %7B%0A
+      setMinNumber(keyValue);%0A
       range.
@@ -1211,24 +1211,54 @@
 == 'max') %7B%0A
+      setMaxNumber(keyValue);%0A
       range.
@@ -2430,36 +2430,25 @@
  value=%7B
-getFieldValue('min')
+minNumber
 %7D%0A      
@@ -3198,36 +3198,25 @@
  value=%7B
-getFieldValue('max')
+maxNumber
 %7D%0A      

allow user to add maxNumber then validate the inputs (#991)