import React, { useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { usePageContext } from '../../providers';
import { CustomColumnsEntityPageState } from '../../state/CustomColumnsEntityPageState';
import { WixPatternsModalsContainer } from '../WixPatternsModalsContainer';
import { WixPatternsPanelModalsContainer } from '../WixPatternsPanelModalsContainer';
import { CustomColumnsEntityPagePanelEntry } from './CustomColumnsEntityPagePanelEntry';

export interface CustomColumnsEntityPagePanelMountProps {
  state: CustomColumnsEntityPageState;
}

function _CustomColumnsEntityPagePanelMount({
  state,
}: CustomColumnsEntityPagePanelMountProps) {
  const { panels } = state;
  const { isPanelLayout, useRelativeSidePanel } = useWixPatternsContainer();
  const { modalsContainerRef, stackingRootRef } = usePageContext();

  useEffect(() => {
    CustomColumnsEntityPagePanelEntry.state = state;
    panels.registerSidePanel(
      'customColumns',
      CustomColumnsEntityPagePanelEntry,
    );
    return panels.init();
  }, []);

  if (isPanelLayout) {
    return <WixPatternsPanelModalsContainer state={panels} />;
  }

  return (
    <WixPatternsModalsContainer
      rootRef={stackingRootRef}
      anchorRef={useRelativeSidePanel ? stackingRootRef : modalsContainerRef}
      state={panels}
    />
  );
}

_CustomColumnsEntityPagePanelMount.displayName =
  'CustomColumnsEntityPagePanelMount';

export const CustomColumnsEntityPagePanelMount = observer(
  _CustomColumnsEntityPagePanelMount,
);