import React, { useContext, memo, useCallback } from 'react';
// import {
//   NativeScrollEvent,
//   NativeSyntheticEvent,
//   ScrollView,
// } from 'react-native';
// import { Subscription } from 'rxjs';
import { SBox } from '../../../common/s-components/layout/s-box';
import { showRotationOverlay } from '../../../common/utils/rotation-service';
import { ContextPerformance, ContextViews } from '../../contexts';
import { setLandscapeOrientation } from '../../../common/utils/device-utils';
import { EmptyStreams } from './empty-streams';
import { fp as _ } from '../../../common/utils/fp';
import { Router } from '../../../common/utils/navigation-service';
import { ROUTES } from '../../../app/constants';
import { LineGraph2 } from '../../../graph/components/line-graph2';
import { GraphFooter } from './graph-footer';
import { SText } from '../../../common/s-components/typography/s-text';
import { SErrorContainer } from '../../s-components/graph/s-error-container';
import { SkeletonsSmall } from '../../../common/components/skeleton-small';
import { SSkeletonContainer } from '../../s-components/graph/s-skeleton-container';
import { isAllZeroCoordinates } from '../../transducers';

export const GraphSmall = memo(() => {
  const onFullScreen = useCallback((): void => {
    showRotationOverlay(() => {
      setLandscapeOrientation();
      Router.goTo(ROUTES.youtubegraph);
    });
  }, []);

  const {
    viewsEntity,
    visibility: visibilityViews,
    refresh,
    views,
  } = useContext(ContextViews);
  const { visibility: visibilityPerformance } = useContext(ContextPerformance);
  const graphData = _.pathOr([], 'raw', viewsEntity);
  const isGraphEmpty =
    _.path('empty', viewsEntity) || isAllZeroCoordinates(graphData);
  const showGraph =
    !visibilityViews.skeleton || !visibilityPerformance.skeleton || refresh;
  const showButtonSkeleton =
    (visibilityPerformance.skeleton || visibilityViews.skeleton) && !refresh;

  const renderFooter = () => <GraphFooter />;

  const renderError = () => {
    if (_.path('error', views)) {
      return (
        <SErrorContainer>
          <SText>Data failed to load.</SText>
        </SErrorContainer>
      );
    }

    return null;
  };

  const renderGraphSkeleton = () => {
    if (visibilityViews.skeleton && !refresh) {
      return (
        <SSkeletonContainer>
          <SkeletonsSmall width={1} height={80} />
        </SSkeletonContainer>
      );
    }

    return null;
  };

  if (_.path('data', views) && isGraphEmpty) {
    return (
      <SBox px={16} mb={-23}>
        <EmptyStreams />
      </SBox>
    );
  }

  return (
    <SBox testID="market-streams-card" mr={16}>
      {showGraph ? (
        <LineGraph2
          {...viewsEntity}
          title="Views"
          onFullScreen={() => {
            onFullScreen();
          }}
          settingsHeader={{
            topOffset: 18,
          }}
          settingsGraph={{
            svgHeight: 154,
            graphInnerHeight: 114,
            paddingTop: 34,
            topYLabelOffset: 15,
          }}
          settingsContainer={{
            paddingBottom: 40,
          }}
          renderFooter={renderFooter}
          renderError={renderError}
          renderGraphSkeleton={renderGraphSkeleton}
          showButtonSkeleton={showButtonSkeleton}
        />
      ) : null}
    </SBox>
  );
});