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 { theme } from '../../app/theme';
import { showRotationOverlay } from '../../common/utils/rotation-service';
import { GraphScreen as Screen } from '../../graph/components/graph-screen';
import { Router } from '../../common/utils/navigation-service';
import { TState } from '../types';
import { DualGraphAnimated } from '../../graph/components/dual-graph-animated';
import { fp as _ } from '../../common/utils/fp';

type TProps = {
  graph: TState['graph'];
};

export const GraphScreen: React.FC<TProps> = props => {
  const { graph } = props;
  const { creations, videoViews } = _.path<any, any>('data', graph);
  const { error, loading, offline } = graph;

  return (
    <Screen
      renderTitle={() => (
        <>
          <Icon
            mt={2}
            name="tiktok"
            size={22}
            color={theme.colors.lavenderGray}
          />
          <SH1 ml={8}>Creations & Views</SH1>
        </>
      )}
      renderGraph={() => (
        <DualGraphAnimated
          lines1={[creations]}
          total1={creations.total}
          maxes1={creations.maxes}
          ticks1={creations.ticks}
          lines2={[videoViews]}
          total2={videoViews.total}
          maxes2={videoViews.maxes}
          ticks2={videoViews.ticks}
        />
      )}
      onBack={() => {
        showRotationOverlay(
          once(() => {
            Router.goBack();
          })
        );
      }}
      showGraph={!offline && !error}
      loading={!offline && !error && loading}
      offline={offline}
      error={error}
      errorTitle="Creations & Views"
      errorVariant="load-failed-graph"
    />
  );
};

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