import { useSelector, useDispatch } from 'react-redux';
import { selectCurrentInputUnit } from '../unit-selector/unitSelectorSlice';
import { setDesiredConversionNumber } from './numberInputFieldSlice';

export function NumberInputField() {
  const currentInputUnit = useSelector(selectCurrentInputUnit);
  const placeHolderString = `Enter # of "${currentInputUnit}"`;
  const dispatch = useDispatch();

  function handleChange(e) {
    const currentNumber = e.target.value;
    dispatch(setDesiredConversionNumber(currentNumber));
  }

  function handleSubmit(e) {
    e.preventDefault();
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <h1>Number Input Field</h1>
        <input type="text" placeholder={ placeHolderString } onChange={handleChange}/>
      </form>
    </div>
  );
}