import React, { useContext, useRef, useCallback, memo } from 'react';
import { ScrollView } from 'react-native';
import { LineGraphNew } from './line-graph-new';
import { SBox } from '../../common/s-components/layout/s-box';
import { showRotationOverlay } from '../../common/utils/rotation-service';
import { ContextPlaylistPerformance } from '../contexts';
import { setLandscapeOrientation } from '../../common/utils/device-utils';
import { Router } from '../../common/utils/navigation-service';
import { ROUTE_PARAMS, ROUTES } from '../../app/constants';
import { TGraphCard, TGraphType } from '../types';
import { EmptyPerformance } from '../../common/components/empty-performance';
import { useRestoreScroll } from '../../common/hooks/use-restore-scroll';

export const CardsSlider = memo(() => {
  const scrollViewRef = useRef<ScrollView>(null);
  const { onScrollEndHandler } = useRestoreScroll(scrollViewRef);

  const goToGraph = useCallback((graphType: TGraphType) => {
    Router.goTo(ROUTES.playlistgraph, {
      [ROUTE_PARAMS.playlistrootGraph]: graphType,
    });
  }, []);

  const trackDetailsHandler = useCallback((graphType: TGraphType): void => {
    showRotationOverlay(() => {
      setLandscapeOrientation();
      goToGraph(graphType);
    });
  }, []);

  const { graphs, visibility } = useContext(ContextPlaylistPerformance);

  const { vendor } = graphs[0];

  return (
    <ScrollView
      testID="playlist-performance"
      scrollEnabled={vendor === 'spotify'}
      horizontal
      showsHorizontalScrollIndicator={false}
      contentContainerStyle={{ paddingRight: 16 }}
      ref={scrollViewRef}
      onScrollEndDrag={onScrollEndHandler}
      onMomentumScrollEnd={onScrollEndHandler}
    >
      {graphs.map((graph: TGraphCard) => {
        const { id, vendor, isGraphEmpty } = graph;
        // hide followers, listeners on slider for apple
        if (
          (vendor === 'apple' || vendor === 'amazon') &&
          ['listeners', 'followers'].includes(id)
        ) {
          return null;
        }

        const graphVisibility = visibility[id];
        // @ts-ignore
        const infoVisibility = visibility[`${id}Info`];
        const streamsPerListenersVisibility = visibility['streamsPerListener'];

        if (graphVisibility.data && isGraphEmpty) {
          return <EmptyPerformance key={id} id={id} vendor={vendor} />;
        }

        return (
          <SBox key={id} testID={`playlist-performance-${id}`}>
            <LineGraphNew
              {...graph}
              graphVisibility={graphVisibility}
              infoVisibility={infoVisibility}
              streamsPerListenersVisibility={streamsPerListenersVisibility}
              onFullScreen={() => trackDetailsHandler(id)}
            />
          </SBox>
        );
      })}
    </ScrollView>
  );
});