import React from 'react';
import { Icon } from '../../common/components/icon';
import { SH1 } from '../../common/s-components/typography/s-h1';
import { fp as _ } from '../../common/utils/fp';
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 { TNavProps } from '../../market/types';
import { Router } from '../../common/utils/navigation-service';
import { TGraphCard } from '../types';

type TProps = {
  graphCard: TGraphCard;
  // } & TNavProps;
} & {};

export const GraphScreen: React.FC<TProps> = props => {
  const { graphCard } = props;

  const vendor = _.path('vendor', graphCard);
  const title = _.path('titleDetailed', graphCard);

  return (
    <Screen
      renderTitle={() => (
        <>
          <Icon
            mt={2}
            name={vendor}
            size={22}
            color={theme.colors.lavenderGray}
          />
          <SH1 ml={8}>{title}</SH1>
        </>
      )}
      renderGraph={() => (
        <>
          {_.path('maxes', graphCard) ? (
            // @ts-ignore
            <MultilineGraphAnimated
              maxes={graphCard.maxes!}
              lines={[graphCard]}
              ticks={graphCard.ticksDetailed!}
              hideTotal
              hidePercentage
              titleY={_.toUpperSafe(graphCard.id)}
            />
          ) : null}
        </>
      )}
      onBack={() => {
        // @ts-ignore
        showRotationOverlay(() => {
          Router.goBack();
        });
      }}
      // TODO? why false by default
      // TODO? why false by default
      // TODO? why false by default
      showGraph
    />
  );
};

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