/**
 * WordPress dependencies
 */
import { useRef, useCallback, useLayoutEffect } from '@wordpress/element';

/**
 * Merges refs into one ref callback. Ensures the merged ref callbacks are only
 * called when it changes (as a result of a `useCallback` dependency update) or
 * when the ref value changes. If you don't wish a ref callback to be called on
 * every render, wrap it with `useCallback( ref, [] )`.
 * Dependencies can be added, but when a dependency changes, the old ref
 * callback will be called with `null` and the new ref callback will be called
 * with the same node.
 *
 * @param {Array} refs The refs to be merged.
 *
 * @return {Function} The merged ref callback.
 */
export default function useMergeRefs( refs ) {
	const element = useRef( null );
	const didElementChange = useRef( false );
	const previousRefs = useRef( refs );
	const currentRefs = useRef( refs );

	// Update on render before the ref callback is called, so the ref callback
	// always has access to the current refs.
	currentRefs.current = refs;

	// If any of the refs change, call the previous ref with `null` and the new
	// ref with the node, except when the element changes in the same cycle, in
	// which case the ref callbacks will already have been called.
	useLayoutEffect( () => {
		refs.forEach( ( ref, index ) => {
			const previousRef = previousRefs.current[ index ];

			if (
				typeof ref === 'function' &&
				ref !== previousRef &&
				didElementChange.current === false
			) {
				previousRef( null );
				ref( element.current );
			}
		} );

		previousRefs.current = refs;
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, refs );

	// No dependencies, must be reset after every render so ref callbacks are
	// correctly called after a ref change.
	useLayoutEffect( () => {
		didElementChange.current = false;
	} );

	// There should be no dependencies so that `callback` is only called when
	// the node changes.
	return useCallback( ( value ) => {
		// Update the element so it can be used when calling ref callbacks on a
		// dependency change.
		element.current = value;
		didElementChange.current = true;

		// When an element changes, the current ref callback should be called
		// with the new element and the previous one with `null`.
		const refsToUpdate = value ? currentRefs.current : previousRefs.current;

		// Update the latest refs.
		refsToUpdate.forEach( ( ref ) => {
			if ( typeof ref === 'function' ) {
				ref( value );
			} else if ( ref && ref.hasOwnProperty( 'current' ) ) {
				ref.current = value;
			}
		} );
	}, [] );
}
