import React from 'react';

import { FiltersMap } from '@wix/bex-core';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';

import {
  CollectionViewsDropdownBase,
  CollectionViewsDropdownBaseProps,
} from './CollectionViewsDropdownBase';
import { setViewsState } from '../../state/setViewsState';

export interface CollectionViewsDropdownProps<F extends FiltersMap>
  extends Omit<
    CollectionViewsDropdownBaseProps<F>,
    'toolbar' | 'popoverProps'
  > {}

export const CollectionViewsDropdown = <F extends FiltersMap>(
  props: CollectionViewsDropdownProps<F>,
) => {
  const toolbar = useToolbarCollectionContext<unknown, F>();
  return <CollectionViewsDropdownBase toolbar={toolbar} {...props} />;
};

CollectionViewsDropdown.setViewsState = setViewsState;
CollectionViewsDropdown.displayName = 'CollectionViewsDropdown';