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

export const NumberInputVaryingSizes: React.FunctionComponent = () => {
  const [input1Value, setInput1Value] = React.useState(1);
  const [input2Value, setInput2Value] = React.useState(1234567890);
  const [input3Value, setInput3Value] = React.useState(5);
  const [input4Value, setInput4Value] = React.useState(12345);

  const onChange = (
    event: React.FormEvent<HTMLInputElement>,
    updateFunction: React.Dispatch<React.SetStateAction<number>>
  ) => {
    const target = event.target as HTMLInputElement;
    updateFunction(Number(target.value));
  };

  const onMinus = (value, updateFunction: React.Dispatch<React.SetStateAction<number>>) => {
    updateFunction(value - 1);
  };

  const onPlus = (value, updateFunction: React.Dispatch<React.SetStateAction<number>>) => {
    updateFunction(value + 1);
  };

  return (
    <React.Fragment>
      <NumberInput
        value={input1Value}
        onMinus={() => onMinus(input1Value, setInput1Value)}
        onChange={event => onChange(event, setInput1Value)}
        onPlus={() => onPlus(input1Value, setInput1Value)}
        inputName="input1"
        inputAriaLabel="number input 1"
        minusBtnAriaLabel="input 2 minus"
        plusBtnAriaLabel="input 2 plus"
        widthChars={1}
      />
      <br />
      <br />
      <NumberInput
        value={input2Value}
        onMinus={() => onMinus(input2Value, setInput2Value)}
        onChange={event => onChange(event, setInput2Value)}
        onPlus={() => onPlus(input2Value, setInput2Value)}
        inputName="input2"
        inputAriaLabel="number input 2"
        minusBtnAriaLabel="input 2 minus"
        plusBtnAriaLabel="input 2 plus"
        widthChars={10}
      />
      <br />
      <br />
      <NumberInput
        value={input3Value}
        onMinus={() => onMinus(input3Value, setInput3Value)}
        onChange={event => onChange(event, setInput3Value)}
        onPlus={() => onPlus(input3Value, setInput3Value)}
        inputName="input3"
        inputAriaLabel="number input 3"
        minusBtnAriaLabel="input 3 minus"
        plusBtnAriaLabel="input 3 plus"
        widthChars={5}
      />
      <br />
      <br />
      <NumberInput
        value={input4Value}
        onMinus={() => onMinus(input4Value, setInput4Value)}
        onChange={event => onChange(event, setInput4Value)}
        onPlus={() => onPlus(input4Value, setInput4Value)}
        inputName="input4"
        inputAriaLabel="number input 4"
        minusBtnAriaLabel="input 4 minus"
        plusBtnAriaLabel="input 4 plus"
        widthChars={5}
      />
    </React.Fragment>
  );
};