import React from 'react';

function setRef<T>(
  ref: React.ForwardedRef<T> | undefined,
  value: T | null,
): void {
  if (typeof ref === 'function') {
    ref(value);
  } else if (ref) {
    ref.current = value;
  }
}

/**
 * Returns a callback ref which sets its value to the provided refs.
 * Useful when you forward a ref but also need to access it inside a component.
 *
 * @example
 * const Component = React.forwardRef((props, ref) => {
 *   const innerRef = useRef(null);
 *   const combinedRef = useCombinedRef(ref, innerRef);
 *
 *   return <div ref={combinedRef}>Test</div>
 * })
 */
export function useCombinedRef<T>(
  refA: React.ForwardedRef<T> | undefined,
  refB: React.ForwardedRef<T> | undefined,
) {
  return React.useMemo(() => {
    if (!refA && !refB) {
      return null;
    }

    return (refValue => {
      setRef(refA, refValue);
      setRef(refB, refValue);
    }) as React.RefCallback<T>;
  }, [refA, refB]);
}