import { useEffect } from 'react';
import debounce from 'lodash-es/debounce';
export function useFloatingPanelRoot({
  containerElement,
  pageContentElement
}) {
  useEffect(() => {
    // this is not an exceptional case: when there is no header this could be omitted
    if (!containerElement || !pageContentElement) {
      return;
    }
    const onResize = debounce(() => {
      const contentRect = pageContentElement.getBoundingClientRect();
      containerElement.style.top = `${contentRect.top}px`;
    }, 100);
    onResize();
    const resizeObserver = new ResizeObserver(onResize);
    resizeObserver.observe(pageContentElement);
    return () => {
      onResize.cancel();
      resizeObserver.disconnect();
    };
  }, [containerElement, pageContentElement]);
}