import { createElement, type ComponentType } from 'react';
import { observer } from 'mobx-react-lite';
import type { FiltersMap } from '@wix/bex-core';
import type { ToolbarCollectionState } from '../../state';
import { isValidElement } from '../isValidElement';

export interface CollectionToolbarsVisualizationProps<T, F extends FiltersMap> {
  state: ToolbarCollectionState<T, F>;
  visualization: ComponentType<{ state: ToolbarCollectionState<T, F> }>;
}

function _CollectionToolbarsVisualization<T, F extends FiltersMap>(
  props: CollectionToolbarsVisualizationProps<T, F>,
) {
  const { visualization, state } = props;

  return isValidElement(visualization)
    ? visualization
    : createElement(visualization, { state });
}

export const CollectionToolbarsVisualization = observer(
  _CollectionToolbarsVisualization,
);