import { Box } from 'components/common';
import { CollectionType, DatasetItem } from './DatasetItem';
import { FilterCallback } from 'types/array';

interface SearchResultsProps {
  data: CollectionType[];
  search: FilterCallback;
  onSelect: (id: string) => React.MouseEventHandler<HTMLDivElement>;
  selected: string[];
}

export const SearchResults = ({
  data,
  search,
  onSelect,
  selected,
}: SearchResultsProps) => {
  const filtered = data.filter(search).map((item) => {
    const isSelected = selected.indexOf(item.id) !== -1;
    return (
      <div className="w100" key={item.id}>
        <DatasetItem data={item} selected={isSelected} onClick={onSelect} />
      </div>
    );
  });

  if (filtered.length) {
    return <Box spacingY={2}>{filtered}</Box>;
  } else {
    return null;
  }
};