import React, { useRef, useContext, useCallback, memo } from 'react';
import { ScrollView } from 'react-native';
import { LineGraph } from '../../graph';
import { SBox } from '../../common/s-components/layout/s-box';
import { showRotationOverlay } from '../../common/utils/rotation-service';
import { ContextMarketStreams } from '../contexts';
import { setLandscapeOrientation } from '../../common/utils/device-utils';
import { EmptyStreams } from '../../common/components/empty-streams';
import { fp as _ } from '../../common/utils/fp';
import { Router } from '../../common/utils/navigation-service';
import { ROUTES } from '../../app/constants';
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 = 'dsp') => {
    Router.goTo(ROUTES.graph, {
      graphType,
    });
  }, []);

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

  const { streams } = useContext(ContextMarketStreams);

  const data = _.path('data', streams);
  const isEmpty = _.path('empty', data);

  if (isEmpty) {
    return (
      <SBox px={16}>
        <EmptyStreams isAllEmpty id="combined" />
      </SBox>
    );
  }

  return (
    <ScrollView
      testID="market-streams"
      // scrollEnabled={!isAllEmpty}
      horizontal
      showsHorizontalScrollIndicator={false}
      contentContainerStyle={{ paddingRight: 16 }}
      ref={scrollViewRef}
      onScrollEndDrag={onScrollEndHandler}
      onMomentumScrollEnd={onScrollEndHandler}
    >
      {!isEmpty &&
        data.result.map((key: string) => {
          const entity = data.entities[key];

          if (!entity) {
            return null;
          }

          if (entity.empty) {
            return <EmptyStreams {...entity} key={key} />;
          }

          return (
            <SBox key={key} testID="market-streams-card">
              {!entity.empty ? (
                <LineGraph
                  {...entity}
                  title={
                    key === 'combined' ? 'Combined Streams' : 'Stream Count'
                  }
                  onFullScreen={() => trackDetailsHandler(key)}
                />
              ) : null}
            </SBox>
          );
        })}
    </ScrollView>
  );
});