import React from 'react';
import { FiltersMap } from '@wix/bex-core';
import { PickerContentProvider } from './PickerContentProvider';
import { fromMultipleSelectionToBoolean } from '../MaxSelection';
import { PickerListContent } from '../PickerListContent';
import { PickerTableListItem } from '../PickerTableListItem';
import { PickerContentWrapped } from './PickerContentWrapped';
import { PickerContentProps } from './PickerContent';

export function PickerContentV2<T, F extends FiltersMap>(
  props: PickerContentProps<T, F>,
) {
  const { modalState } = props;

  return (
    // wrap with a new WixPatternsContainer that can get initialProps
    <PickerContentProvider modalState={modalState}>
      <PickerContentWrapped
        {...props}
        renderPickerContent={({ state, renderItem }) => (
          <PickerListContent
            {...props.selectorListProps}
            state={state.picker}
            multiple={fromMultipleSelectionToBoolean(props.multiple)}
            renderItem={(keyedItem, index) => (
              <PickerTableListItem
                {...renderItem?.(keyedItem.item, index)}
                state={state.picker}
                keyedItem={keyedItem}
              />
            )}
          />
        )}
      />
    </PickerContentProvider>
  );
}