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

type TProps = {
  items: TNormalizedData;
  cardHeight: number;
  hiddenFromTopCount: number;
  maxVisible: number;
  keepVisibleCount: number;
};

export const InfinityListComponent = memo((props: TProps) => {
  const {
    items,
    cardHeight,
    hiddenFromTopCount,
    maxVisible,
    keepVisibleCount,
  } = props;
  const renderItem = useCallback(
    (item: any, i: number) => {
      if (
        isVirtualElement(i, hiddenFromTopCount, maxVisible, keepVisibleCount)
      ) {
        return null;
      }

      return <ListItem key={item.id} {...item} rank={i + 1} />;
    },
    [hiddenFromTopCount, maxVisible, keepVisibleCount]
  );

  return (
    <SBox
      height={cardHeight * items.length}
      pt={cardHeight * hiddenFromTopCount}
      testID="chart-placement-list"
    >
      {items.map((item, i) => {
        return renderItem(item, i);
      })}
    </SBox>
  );
});

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