import React from 'react';
import { NumberInput, ValidatedOptions } from '@patternfly/react-core';

export const NumberInputWithStatus: React.FunctionComponent = () => {
  const max = 10;
  const min = 0;

  const [validated, setValidated] = React.useState<ValidatedOptions>(ValidatedOptions.success);
  const [value, setValue] = React.useReducer((state, newVal) => Math.max(min, Math.min(max, Number(newVal))), 5);

  const onPlus = () => {
    const newVal = value + 1;
    setValue(newVal);
    validate(newVal);
  };

  const onMinus = () => {
    const newVal = value - 1;
    setValue(newVal);
    validate(newVal);
  };

  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
    const target = event.target as HTMLInputElement;
    const newVal = isNaN(+target.value) ? 5 : Number(target.value);
    setValue(newVal);
    validate(newVal);
  };

  const validate = newVal => {
    const diff = Math.abs(5 - newVal);
    if (diff > 3) {
      setValidated(ValidatedOptions.error);
    } else if (diff > 1) {
      setValidated(ValidatedOptions.warning);
    } else {
      setValidated(ValidatedOptions.success);
    }
  };
  return (
    <>
      In the following example, the validated status will update based on the value of the number input and how far from
      the number 5 it is.
      <br />
      <NumberInput
        validated={validated}
        value={value}
        min={0}
        max={10}
        onMinus={onMinus}
        onPlus={onPlus}
        onChange={onChange}
        inputName="input"
        inputAriaLabel="number input"
        minusBtnAriaLabel="minus"
        plusBtnAriaLabel="plus"
      />
    </>
  );
};