import React, { memo, useCallback } from 'react';
import { withNavigation } from '../../../common/hoc/with-navigation';
import { fp as _ } from '../../../common/utils/fp';
import { isVirtualElement } from '../../../common/transducers';
import { SBox } from '../../../common/s-components/layout/s-box';
import { withVirtualization } from '../../../common/hoc/with-virtualization';
import { StreamsCard } from './streams-card';
import { TCardData } from '../../types';

type TProps = {
  items: TCardData[];
  hiddenFromTopCount: number;
  maxVisible: number;
  keepVisibleCount: number;
  onCardClick: (market: string) => void;
  cardHeight: number;
};

const InfinityListComponent: React.FC<TProps> = memo(props => {
  const {
    items,
    hiddenFromTopCount,
    cardHeight,
    maxVisible,
    keepVisibleCount,
    onCardClick,
  } = props;
  const renderItem = useCallback(
    (item: TCardData, i: number) => {
      if (
        isVirtualElement(i, hiddenFromTopCount, maxVisible, keepVisibleCount)
      ) {
        return null;
      }
      return (
        <StreamsCard
          // testID="infinity-list-streams-card"
          key={item.market}
          card={item}
          onCardClick={onCardClick}
        />
      );
    },
    [hiddenFromTopCount, maxVisible, keepVisibleCount, onCardClick]
  );

  return (
    <SBox
      height={cardHeight * items.length}
      pt={cardHeight * hiddenFromTopCount}
    >
      {items.map(renderItem)}
    </SBox>
  );
});

export const InfinityList = _.compose(
  withNavigation,
  withVirtualization
)(InfinityListComponent);