import * as React from 'react';
import { OVERLAY_SEARCH_ITEM_HEIGHT, ResultItem } from './ResultItem';
import { useSearchBar } from '../searchbar/SearchBar';
import { useDataSearch } from '../../datasource/useDataSearch';
import { AutoSizer, List } from 'react-virtualized';
import { PageContainer } from '../common/PageContainer';
import { DataItem, DataItemKind, SearchQuery } from '../../types';
import ago from 's-ago';
import { Spinner } from '@blueprintjs/core';

export const SearchResults: React.FC<{
  onClickItem?: (item: DataItem) => void;
  hideItemIds: string[];
  hiddenSearch: SearchQuery;
}> = props => {
  const search = useSearchBar();
  const searchResult = useDataSearch({ ...search.searchQuery, ...props.hiddenSearch }, 30);

  const items = searchResult.items.filter(i => !props.hideItemIds.includes(i.id));

  return (
    <AutoSizer>
      {({ width, height }) => {
        return (
          <List
            rowCount={items.length + (searchResult.nextPageAvailable ? 50 : 0)}
            rowHeight={OVERLAY_SEARCH_ITEM_HEIGHT}
            width={width}
            height={height}
            containerStyle={{ paddingRight: '10px' }}
            rowRenderer={cellProps => {
              const itemId = cellProps.index;

              if (itemId >= items.length) {
                if (searchResult.nextPageAvailable) {
                  searchResult.fetchNextPage();
                  return (
                    <ResultItem
                      key={cellProps.key}
                      containerStyle={cellProps.style}
                      icon={<Spinner size={16} />}
                      title="Loading..."
                      meta=""
                    />
                  );
                } else {
                  return null;
                }
              }

              const item = items[itemId];

              return (
                <ResultItem
                  key={cellProps.key}
                  containerStyle={cellProps.style}
                  icon={(item.icon || (item.kind === DataItemKind.Collection ? 'folder-open' : 'document')) as any}
                  title={item.name}
                  meta={ago(new Date(item.lastChange))}
                  onClick={() => props.onClickItem?.(item)}
                  dataItem={item}
                />
              );
            }}
          />
        );
      }}
    </AutoSizer>
  );
};