// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck
import {useRef, useLayoutEffect, useState, useCallback, RefObject} from 'react';
import ResizeObserver from 'resize-observer-polyfill';

const useResizeObserver = () => {
    const [observerEntry, setObserverEntry] = useState<Record<string, any>>({});
    const [node, setNode] = useState<RefObject<any> | null>(null);
    const observer: any = useRef(null);

    const disconnect = useCallback(() => observer.current?.disconnect(), []);

    const observe = useCallback(() => {
        observer.current = new ResizeObserver(([entry]) => setObserverEntry(entry));
        if (node) {observer.current.observe(node)}
    }, [node]);

    useLayoutEffect(() => {
        observe();
        return () => disconnect();
    }, [disconnect, observe]);

    return [setNode, observerEntry];
};

export default useResizeObserver;