import React, { memo } from 'react';
import once from 'lodash/fp/once';
import { Icon } from '../../common/components/icon';
import { SH1 } from '../../common/s-components/typography/s-h1';
import { fp as _ } from '../../common/utils/fp';
import { CumulativeGraphAnimated } from '../../graph';
import { theme } from '../../app/theme';
import { showRotationOverlay } from '../../common/utils/rotation-service';
import { MultilineGraphAnimated } from '../../graph/components/multiline-graph-animated';
import { GraphScreen as Screen } from '../../graph/components/graph-screen';
import { TEntity } from '../../common/types';
import { TGraphTypes } from '../types';
import { Router } from '../../common/utils/navigation-service';
import { TLines } from '../../graph/types';

type TProps = {
  streams: TEntity;
  streamsLines: TLines;
  variant?: 'linear' | 'cumulative';
  graphType?: TGraphTypes;
  cumulativeEntity: TEntity;
};

export const GraphScreen: React.FC<TProps> = memo(props => {
  const { streams, streamsLines, variant, cumulativeEntity, graphType } = props;
  const { error, loading, offline } = cumulativeEntity || {};

  return (
    <Screen
      renderTitle={() => (
        <>
          {graphType !== 'combined' ? (
            <Icon
              mt={2}
              name={graphType}
              size={22}
              color={theme.colors.lavenderGray}
            />
          ) : null}
          {variant === 'linear' ? (
            <SH1>Combined Streams</SH1>
          ) : (
            <SH1 ml={8}>Stream Count</SH1>
          )}
        </>
      )}
      renderGraph={() => (
        <>
          {variant === 'linear' && _.path('data.maxes', streams) ? (
            <MultilineGraphAnimated
              maxes={streams.data.maxes}
              lines={streamsLines}
              ticks={streams.data.ticks}
            />
          ) : null}
          {variant === 'cumulative' ? (
            <CumulativeGraphAnimated {..._.path('data', cumulativeEntity)} />
          ) : null}
        </>
      )}
      onBack={() => {
        showRotationOverlay(
          once(() => {
            Router.goBack();
          })
        );
      }}
      showGraph={!offline && !error}
      loading={!offline && !error && loading}
      offline={offline}
      error={error}
      errorTitle={variant === 'linear' ? 'Combined Streams' : 'Stream Count'}
    />
  );
});

GraphScreen.defaultProps = {
  variant: 'linear',
  graphType: 'combined',
};

// static navigationOptions = {
//   header: null,
// };