import { observer } from 'mobx-react';
import React, { useState, useEffect } from 'react';

export const DetectContentOverflow: React.FC<{ children }> = observer(
  ({ children }) => {
    const [isContentOverflowing, setIsContentOverflowing] = useState(false);
    const contentRef = React.useRef<HTMLDivElement>(null);
    useEffect(() => {
      const handleResize = () => {
        console.log('handleResize');
        if (contentRef?.current) {
          console.log('contentRef?.current', contentRef?.current.innerHTML);
          const contentWidth =
            contentRef?.current?.getBoundingClientRect().width;
          const documentWidth = document.documentElement.clientWidth;
          console.log('contentWidth', { contentWidth, documentWidth });
          const isOverflowing = contentWidth > documentWidth;
          setIsContentOverflowing(isOverflowing);
        }
      };

      window.addEventListener('resize', handleResize);
      handleResize();

      return () => {
        window.removeEventListener('resize', handleResize);
      };
    }, []);

    return (
      <div ref={contentRef}>
        {children}
        {`${isContentOverflowing}`}
      </div>
    );
  }
);