import React, { HTMLAttributes, ReactNode } from 'react';
import { observer } from 'mobx-react-lite';
import { CollectionSearch } from '../CollectionSearch';
import { CollectionStateProps } from '../collectionStateProps';
import { Box } from '@wix/design-system';
import { FiltersMap } from '@wix/bex-core';

export interface PickerSubheaderProps<T, F extends FiltersMap = FiltersMap>
  extends CollectionStateProps<T, F>,
    HTMLAttributes<HTMLDivElement> {
  subtitle?: ReactNode;
  search?: boolean;
  spacing?: 30 | 94;
}

function _PickerSubheader<T, F extends FiltersMap = FiltersMap>(
  props: PickerSubheaderProps<T, F>,
) {
  const { state, subtitle, search = true, spacing = 30, ...rest } = props;
  return (
    <Box
      dataHook="picker-subheader"
      display="block"
      padding={search ? `30px ${spacing}px 18px` : `0 ${spacing}px 18px`}
      {...rest}
    >
      {subtitle && (
        <Box
          display="block"
          marginTop={search ? undefined : `30px`}
          marginBottom={search ? `18px` : undefined}
        >
          {subtitle}
        </Box>
      )}
      <CollectionSearch minWidthPixels="100%" />
    </Box>
  );
}

export const PickerSubheader = observer(_PickerSubheader);