import React, { memo, useContext } from 'react';
import { ContextPlaylists } from '../../contexts';
import { PLAYLIST_PAGE_VARIANT } from '../../../common/submodules/starring-playlists/constants';
import { SwipeablePlaylist } from '../../../common/components/swipeable-playlist';
import { ContextStarredPlaylists } from '../../../common/context';
import { EStarSourcePages } from '../../../common/constants';

type TProps = {};

export const Playlists: React.FC<TProps> = memo(() => {
  const props = useContext(ContextPlaylists);
  const starred = useContext(ContextStarredPlaylists);
  const { entity, goToPlaylist } = props;

  return (
    <SwipeablePlaylist
      testID="starred-items-swipeable-playlist"
      cards={entity.data}
      onPress={goToPlaylist}
      onPressRight={starred.toggleStarred}
      pageVariant={PLAYLIST_PAGE_VARIANT.search}
      variant="light"
      starSource={EStarSourcePages.Search}
    />
  );
});