import type { MutableRefObject, RefCallback, Ref } from 'react'
import { useMemo } from 'react'
/**
 * Merges an array of refs into a single memoized callback ref or `null`.
 *
 * Taken from MIT licensed floating-ui/react
 *
 * @see https://floating-ui.com/docs/react-utils#usemergerefs
 */
export function useMergeRefs<Instance>(
    refs: Array<Ref<Instance> | undefined>
): RefCallback<Instance> | null {
    return useMemo(() => {
        if (refs.every((ref) => ref == null)) {
            return null
        }

        return (value) => {
            refs.forEach((ref) => {
                if (typeof ref === 'function') {
                    ref(value)
                } else if (ref != null) {
                    ;(ref as MutableRefObject<Instance | null>).current = value
                }
            })
        }
    }, refs) // eslint-disable-line react-hooks/exhaustive-deps
}