import React 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 { GraphScreen as Screen } from '../../graph/components/graph-screen';
import { TEntity } from '../../common/types';
import { Router } from '../../common/utils/navigation-service';

type TProps = {
  cumulativeEntity: TEntity;
};

export const GraphScreen: React.FC<TProps> = ({ cumulativeEntity }) => {
  const { error, loading, offline } = cumulativeEntity || {};

  return (
    <Screen
      renderTitle={() => (
        <>
          <Icon
            mt={2}
            name="youtube"
            size={22}
            color={theme.colors.lavenderGray}
          />
          <SH1 ml={8}>Views by Sources</SH1>
        </>
      )}
      renderGraph={() => (
        <CumulativeGraphAnimated
          {..._.path('data', cumulativeEntity)}
          label="Views"
        />
      )}
      onBack={() => {
        showRotationOverlay(
          once(() => {
            Router.goBack();
          })
        );
      }}
      showGraph={!offline && !error}
      loading={!offline && !error && loading}
      offline={offline}
      error={error}
      errorTitle="Combined Streams"
    />
  );
};