import React, { ComponentType } from 'react';
import { FiltersMap, OptionalFiltersMap } from '@wix/bex-core';
import { UsePickerContentParams } from '../../hooks/usePickerContent';
import { PickerContentState } from '../../state';
import { PickerContentProvider } from './PickerContentProvider';
import { PickerSelectorListContent } from '../PickerSelectorListContent';
import { fromMultipleSelectionToBoolean } from '../MaxSelection';
import { PickerContentWrapped } from './PickerContentWrapped';
import { PickerContentItemsSelectionProps } from './PickerContentItemsSelection';
import { SelectorListContentProps } from '@wix/design-system';
import { PickerContentAdditionalStepProps } from './PickerContentAdditionalStep';

export interface PickerContentComponentBaseProps<T, F extends FiltersMap>
  extends PickerContentItemsSelectionProps<T, F>,
    PickerContentAdditionalStepProps<T> {
  /**
   * Additional props to pass to [SelectorList](https://www.docs.wixdesignsystem.com/?path=/story/components-lists--selectorlist), i.e `imageSize`, `imageShape` etc.
   */
  selectorListProps?: Partial<SelectorListContentProps>;
}

export interface PickerContentProps<T, F extends FiltersMap>
  extends PickerContentComponentBaseProps<T, F> {
  /**
   * A state object created with [`usePickerContent`](./?path=/story/base-components-collections-picker-hooks--usepickercontent)
   */
  state: UsePickerContentParams<T, F> | PickerContentState<T, F>;
}

export type PickerContentComponentProps<
  T,
  F extends FiltersMap = OptionalFiltersMap,
> = Omit<
  PickerContentComponentBaseProps<T, F>,
  | 'renderItem'
  | 'pickerContentState'
  | 'renderEmptyState'
  | 'renderPickerContent'
>;

export type PickerContentComponent<
  T,
  F extends FiltersMap = OptionalFiltersMap,
> = ComponentType<PickerContentComponentProps<T, F>>;

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

  // wrap with a new WixPatternsContainer that can get initialProps
  return (
    <PickerContentProvider modalState={modalState}>
      <PickerContentWrapped
        {...props}
        renderPickerContent={({ state, renderItem }) => (
          <PickerSelectorListContent
            {...props.selectorListProps}
            state={state}
            multiple={fromMultipleSelectionToBoolean(props.multiple)}
            hasAdditionalStep={props.hasAdditionalStep}
            renderItem={renderItem}
          />
        )}
      />
    </PickerContentProvider>
  );
}