import React, { useCallback, useContext, memo } from 'react';
import { ACTIVE_TAB } from '../constants';
import { ContextCurrent, ContextPast } from '../contexts';
import { SwipeablePlaylist } from '../../common/components/swipeable-playlist';
import { ContextStarredPlaylists } from '../../common/context';
import { EStarSourcePages } from '../../common/constants';
import { goToPlaylistPlacement } from '../services';
// import { fp as _ } from '../../common/utils/fp';

export const List: React.FC = memo(() => {
  const starred = useContext(ContextStarredPlaylists);
  const {
    entity: current,
    activeVisibility,
    /*, goToCurrentPlaylist*/
  } = useContext(ContextCurrent);
  const { entity: past /*, goToPastPlaylist */ } = useContext(ContextPast);
  const { variant } = activeVisibility;
  const goTo = useCallback((params: any) => {
    // if (params.vendor === 'amazon') {
    //   return false;
    // }

    goToPlaylistPlacement({
      playlistId: params.id,
      playlistMarket: params.country_code,
      playlistVendor: params.vendor,
      playlistImageUrl: params.image_url,
      playlistName: params.name,
      placementVariant: variant,
    });
  }, []);

  return (
    <SwipeablePlaylist
      variant="playlists-card"
      testID="playlists-swipeable-list"
      pageVariant="playlists"
      cards={(variant === ACTIVE_TAB.current ? current.data : past.data) || []}
      cardVariant={variant === ACTIVE_TAB.current ? 'current' : 'past'}
      composedKey={['country_code', 'isrc', 'id']}
      onPress={goTo}
      onPressRight={starred.toggleStarred}
      virtualCardHeight={176}
      starSource={
        variant === ACTIVE_TAB.current
          ? EStarSourcePages.CurrentPlaylists
          : EStarSourcePages.PastPlaylists
      }
      // highlightedIsrc={highlightedIsrc}
    />
  );
});