import React, { memo, useContext } from 'react';
import { SBox } from '../../../common/s-components/layout/s-box';
import { Skeleton } from '../shared/skeleton';
import { SwipeableList } from '../../../common/components/swipeable-list';
import { ContextRecentTracks } from '../../contexts';
import { ContextStarred } from '../../../common/context';
import { TitleRecentSearch } from '../shared/title-recent-search';
import { ArcRecentSearch } from '../shared/arc-recent-search';
import { EStarSourcePages } from '../../../common/constants';

type TProps = {};

export const RecentTracks: React.FC<TProps> = memo(() => {
  const props = useContext(ContextRecentTracks);
  const starred = useContext(ContextStarred);

  const { visibility, entity, goToTrack } = props;

  return (
    <SBox flex={1}>
      <ArcRecentSearch />

      {visibility.skeleton ? (
        <SBox mt={144}>
          <Skeleton />
        </SBox>
      ) : null}

      {visibility.data ? (
        <>
          <TitleRecentSearch />
          {entity.data ? (
            <SwipeableList
              testID="recent-searches-swipeable-list"
              cards={entity.data}
              onPress={goToTrack}
              onPressRight={starred.toggleStarred}
              pageVariant="search"
              starSource={EStarSourcePages.Recentsearch}
            />
          ) : null}
        </>
      ) : null}
    </SBox>
  );
});