// @ts-nocheck
import React from 'react';
import { NavigationProp } from '@react-navigation/native';
import once from 'lodash/once';
import { SH1 } from '../../common/s-components/typography/s-h1';
import { MultilineGraphAnimated } from '../../graph/components/multiline-graph-animated';
import { TGraph } from '../../graph/types';
import { TNavProps, TVisibility } from '../types';
import { GraphScreen as Screen } from '../../graph/components/graph-screen';
import { Router } from '../../common/utils/navigation-service';

type TProps = {
  graph?: TGraph;
  visibility: TVisibility;
  navigation: NavigationProp<any>;
  route: {
    params: TNavProps;
  };
};

export const GraphScreen: React.FC<TProps> = props => {
  const { graph, visibility } = props;
  const goBack = once(() => {
    Router.goBack();
  });

  return (
    <Screen
      renderTitle={() => <SH1>Combined Streams</SH1>}
      renderGraph={() => <MultilineGraphAnimated {...graph} />}
      onBack={goBack}
      showGraph={visibility.data}
    />
  );
};

// GraphScreen.navigationOptions = () => ({
//   header: null,
// });
//
// GraphScreen.propTypes = {
//   navigation: PropTypes.shape({
//     state: PropTypes.shape({
//       params: PropTypes.object,
//     }),
//   }),
//   graph: TGraph,
//   visibility: TVisibility.isRequired,
// };
//
// GraphScreen.defaultProps = {
//   navigation: { state: { params: {} } },
//   graph: undefined,
// };