import React, { memo, useContext } from 'react';
import { SBox } from '../../../common/s-components/layout/s-box';
// import { fp as _ } from '../../../common/utils/fp';
import { SwipeableList } from '../../../common/components/swipeable-list';
// import { ErrorBlock } from './error-block';
import { ContextTracks } from '../../contexts';
// import { LoadingOverlay } from '../../../common/components/loading-overlay';
import { ContextStarred } from '../../../common/context';
import { getMarketCodeWithArticle } from '../../../common/transducers';
import { EStarSourcePages } from '../../../common/constants';

type TProps = {};

export const Tracks: React.FC<TProps> = memo(() => {
  const props = useContext(ContextTracks);
  const starred = useContext(ContextStarred);
  const { visibility, entity, goToTrack, streamRange, market } = props;
  const marketCode = getMarketCodeWithArticle(market!, false);

  return (
    <SBox>
      {visibility.data ? (
        <SwipeableList
          testID="starred-items-swipeable-list"
          cards={entity.data}
          onPress={goToTrack}
          onPressRight={starred.toggleStarred}
          pageVariant="starred"
          starSource={EStarSourcePages.Starred}
          streamRange={streamRange}
          marketName={marketCode}
        />
      ) : null}
    </SBox>
  );
});