// @ts-nocheck
import React, { memo, useCallback } from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { TMarketsStreamsEntity, TVisibility } from '../types';
import { Skeleton } from './skeleton';
import { ErrorBlock } from '../../common/components/error-block';
import { MultilineGraph } from '../../graph/components/multiline-graph';
import { TGraph } from '../../graph/types';
import { Portal } from '../../common/utils/portal/portal';
import { SwipeablePopup } from '../../common/components/bottom-sheet/swipeable-popup';
import { InfoCombinedStreams } from './info-combined-streams';
import { togglePopup } from '../../common/utils/swipeable-popup-service';
import { showRotationOverlay } from '../../common/utils/rotation-service';
import { setLandscapeOrientation } from '../../common/utils/device-utils';
import { CLICK_SOURCES, onInfoIconPress } from '../../analytics';
import { TActiveTab } from '../../markets/types';
import { Router } from '../../common/utils/navigation-service';
import { ROUTES } from '../../app/constants';

type TProps = {
  visibility: TVisibility;
  graph: TGraph;
  streams: TMarketsStreamsEntity[];
  route: {
    params: {
      marketTab: TActiveTab;
    };
  };
};

export const MarketsStreams: React.FC<TProps> = memo(props => {
  const { streams, graph, visibility } = props;
  const goToGraph = () => {
    Router.goTo(ROUTES.graphmulti, {
      // graphmultiType,
    });
  };
  const onFullScreen = () => {
    showRotationOverlay(() => {
      setLandscapeOrientation();
      goToGraph();
    });
  };

  const infoPressHandler = () => {
    togglePopup('markets-streams');
    onInfoIconPress({ source_section: CLICK_SOURCES.TOP_STREAMS_OVERVIEW });
  };

  const renderFgLayer = useCallback(() => {
    return (
      <Portal id="markets-streams" updateIfAnyChanged={{ streams }}>
        <SwipeablePopup
          variant="markets-streams"
          content={<InfoCombinedStreams streams={streams} />}
        />
      </Portal>
    );
  }, [streams]);

  return (
    <SBox px={16} height={280} mb={41}>
      {renderFgLayer()}
      {visibility.skeleton ? <Skeleton /> : null}
      {visibility.error ? (
        <ErrorBlock
          textTopMargin={-2}
          mx={-1}
          message="Data failed to load."
          height={250}
        />
      ) : null}
      {visibility.data ? (
        <MultilineGraph
          onInfoPress={infoPressHandler}
          {...graph}
          onFullScreen={onFullScreen}
        />
      ) : null}
    </SBox>
  );
});