import React, { useState } from 'react';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { CustomColumnsPanel } from './CustomColumnsPanel';
import { CustomColumnsState } from '../../state';
import type { CustomColumnsDragAndDrop } from '../CustomColumns/CustomColumnsDragAndDrop';
import { minimalRequiredWdsRuntimeCheck } from '../../minimalRequiredWdsRuntimeCheck';
import { usePageContext } from '@wix/bex-core/react';

function _CustomColumnsPanelEntry() {
  const toolbar = useToolbarCollectionContext();
  const { modalsContainerRef } = usePageContext();

  if (process.env.NODE_ENV !== 'production') {
    minimalRequiredWdsRuntimeCheck({
      required: '^1.68.0',
      requiredBy: 'WixPatterns/CustomColumns',
    });
  }

  const [state] = useState(
    () =>
      (toolbar.customColumnsState ??= new CustomColumnsState({
        table: toolbar,
        container: toolbar.container,
        dragAndDrop: CustomColumnsPanelEntry.CustomColumnsDragAndDrop,
        modalsContainerRef,
      })),
  );

  return <CustomColumnsPanel state={state} />;
}

export const CustomColumnsPanelEntry =
  _CustomColumnsPanelEntry as typeof _CustomColumnsPanelEntry & {
    CustomColumnsDragAndDrop?: typeof CustomColumnsDragAndDrop;
  };