import { useEffect, useState } from 'react';

const focusTimeout = 5 * 1000;

export 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: boolean) => {
      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: boolean) => {
      setVisualFocus(value);
    },
  };
};