import React, { useEffect, useState } from 'react';
import { usePageContext, useScrollableContentContext } from '../../providers';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { createPortal } from 'react-dom';
import { observer } from 'mobx-react-lite';
import { RectState } from '../../state/RectState';
import { useWixPatternsContainer } from '@wix/bex-core/react';

function _ContainerRectDebug() {
  const container = useWixPatternsContainer();
  const { stackingRootRef } = usePageContext();
  const { scrollableContentRef } = useScrollableContentContext();
  const toolbar = useToolbarCollectionContext();

  const [scrollableContentRect] = useState(
    () =>
      new RectState({
        container,
      }),
  );

  useEffect(() => {
    scrollableContentRect.element = scrollableContentRef?.current;
    return scrollableContentRect.init();
  }, []);

  if (stackingRootRef?.current == null) {
    return null;
  }

  return createPortal(
    <div
      style={{
        position: 'fixed',
        zIndex: 50,
        background: 'transparent',
        pointerEvents: 'none',
        border: '#15e9e9 1px solid',
        ...(toolbar.containerRect && {
          top: toolbar.containerRect.top,
          left: toolbar.containerRect.left,
          bottom: 0,
          width: toolbar.containerRect.width,
        }),
      }}
    />,
    stackingRootRef.current,
  );
}

export const ContainerRectDebug = observer(_ContainerRectDebug);