import React, { useCallback, useState } from 'react';

export type UseIsFocusedParams = {
  onFocus?: React.FocusEventHandler<HTMLInputElement>;
  onBlur?: React.FocusEventHandler<HTMLInputElement>;
};

export function useIsFocused({
  onFocus: userOnFocus,
  onBlur: userOnBlur,
}: UseIsFocusedParams) {
  const [isFocused, setIsFocused] = useState(false);

  const onFocus: React.FocusEventHandler<HTMLInputElement> = useCallback(
    event => {
      setIsFocused(true);
      userOnFocus && userOnFocus(event);
    },
    [userOnFocus],
  );

  const onBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(
    event => {
      setIsFocused(false);
      userOnBlur && userOnBlur(event);
    },
    [userOnBlur],
  );

  return { isFocused, onFocus, onBlur };
}