import { useState, useEffect } from 'react';

const focusTimeout = 5 * 1000;
const useFocus = () => {
  const [focus, setFocus] = useState(false);
  const [visualFocus, setVisualFocus] = useState(false);
  const [counter, setCounter] = useState(0);
  useEffect(() => {
    if (focus) {
      const timeout = setTimeout(() => {
        setVisualFocus(false);
      }, focusTimeout);
      return () => clearTimeout(timeout);
    }
  }, [focus, counter]);
  return {
    focus,
    setFocus: value => {
      setFocus(value);
      if (value) {
        setVisualFocus(true);
      }
      // any call to setFocus should reset the timeout, even if the input was already in focus
      // updating the counter will trigger the useEffect to reset the timeout
      setCounter(prev => prev + 1);
    },
    visualFocus,
    setVisualFocus: value => {
      setVisualFocus(value);
    }
  };
};

export { useFocus };
//# sourceMappingURL=useFocus.mjs.map
