import React, { memo, useContext } from 'react';
import { SwipeableList } from '../../../common/components/swipeable-list';
import { RefillingIndicator } from '../../../common/components/refilling-indicator';
import { FETCH_TYPE } from '../../../common/constants';
import { ContextStarred } from '../../../common/context';
import { TTracklistExtended } from '../../types';
import { TTrackParams } from '../../../common/types';
import { TTrackPageSource } from '../../../analytics/types';

type TProps = {
  tracklist: TTracklistExtended;
  activeIsrc: string | undefined;
  onCardPress: (params: TTrackParams) => void;
  starSource: TTrackPageSource;
};

export const Tracklist: React.FC<TProps> = memo(props => {
  const starred = useContext(ContextStarred);
  const { tracklist, activeIsrc, onCardPress, starSource } = props;
  const composedKey = ['current_position', 'isrc', 'id'];
  return (
    <>
      <SwipeableList
        testID="playlist-placement-search-swipeable-list"
        pageVariant={
          activeIsrc
            ? 'playlist-placement-search'
            : 'playlist-placement-search-2'
        }
        composedKey={composedKey}
        cards={tracklist.data || []}
        onPress={onCardPress}
        onPressRight={starred.toggleStarred}
        virtualCardHeight={136}
        highlightedIsrc={activeIsrc}
        // showPosition
        starSource={starSource}
        // showChange
        // showStreamCount={activeTab !== 'apple'}
      />
      {tracklist.loadingVariant === FETCH_TYPE.refill ? (
        <RefillingIndicator position="absolute" bottom={0} />
      ) : null}
    </>
  );
});