import React, { memo, useCallback } from 'react';
import { withNavigation } from '../../common/hoc/with-navigation';
import { fp as _ } from '../../common/utils/fp';
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 { TPreparedChartsItem } from '../types';

type TProps = {
  items: TPreparedChartsItem[];
  cardHeight: number;
  hiddenFromTopCount: number;
  maxVisible: number;
  keepVisibleCount: number;
  sortVariant: string;
};

const InfinityListComponent: React.FC<TProps> = memo(props => {
  const {
    items,
    cardHeight,
    hiddenFromTopCount,
    maxVisible,
    keepVisibleCount,
    sortVariant,
  } = props;
  const renderItem = useCallback(
    (item: TPreparedChartsItem, i: number) => {
      if (
        isVirtualElement(i, hiddenFromTopCount, maxVisible, keepVisibleCount)
      ) {
        return null;
      }

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

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

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