import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { createStructuredSelector } from 'reselect';
import { Nullable } from 'tsdef';
import { GraphScreen } from '../components/graph-screen';
import reducer, { ACTION } from '../reducer';
import {
  makeSpotifySelector,
  makeAppleSelector,
  makeStreamsExtendedSelector,
  makeAmazonSelector,
  makeStreamsLinesSelector,
} from '../selectors';
import { fp as _ } from '../../common/utils/fp';
import { withErrorBoundary } from '../../common/hoc/with-error-boundary';
import { withReducer } from '../../app/core/with-reducer';
import { withEpics } from '../../app/core/with-epics';
import * as epics from '../../track/epics';
import { updatePageMeta, PAGES } from '../../analytics';
import { getGraphTypeForAnalytics } from '../transducers';
import { withNavigationSync } from '../../common/hoc/with-navigation-sync';
import {
  setLandscapeOrientation,
  setPortraitOrientation,
} from '../../common/utils/device-utils';
import { TGraphTypes, TRootStateMarketStreams } from '../types';
import { TEntity } from '../../common/types';
import { TNavProps } from '../../market/types';
import { TLines } from '../../graph/types';

type TStructured = {
  streams: TEntity;
  streamsLines: TLines;
  spotify: TEntity;
  apple: TEntity;
  amazon: TEntity;
};

export type TPropsExternal = {
  route: TNavProps;
};

export type TPropsConnected = TStructured &
  TPropsExternal & {
    getSpotify: () => void;
    getApple: () => void;
    getAmazon: () => void;
    setGraphType: (setGraphType: Nullable<string>) => void;
  };

const mapStateToProps = createStructuredSelector<
  TRootStateMarketStreams,
  TStructured
>({
  streams: makeStreamsExtendedSelector(),
  streamsLines: makeStreamsLinesSelector(),
  spotify: makeSpotifySelector(),
  apple: makeAppleSelector(),
  amazon: makeAmazonSelector(),
  //†prop
});
const mapDispatchToProps = {
  // action1: ACTION.action1,
  getSpotify: ACTION.getSpotify,
  getApple: ACTION.getApple,
  getAmazon: ACTION.getAmazon,
  setGraphType: ACTION.setGraphType,
  //†action
};

// Uncomment to write componentDidMount hook
const Connected: React.FC<TPropsConnected> = props => {
  const {
    route,
    getSpotify,
    getApple,
    getAmazon,
    spotify,
    apple,
    amazon,
    setGraphType,
    streams,
    streamsLines,
  } = props;
  const graphType: TGraphTypes = _.path('params.graphType')(route);
  const cumulativeEntity = { spotify, apple, amazon }[
    graphType as 'spotify' | 'apple' | 'amazon'
  ];

  useEffect(() => {
    updatePageMeta({
      page: PAGES.Graph.page,
      detailed_graph_type: getGraphTypeForAnalytics(graphType),
    });
  }, []);

  useEffect(() => {
    setLandscapeOrientation();

    ({
      combined: _.noop,
      spotify: getSpotify,
      apple: getApple,
      amazon: getAmazon,
    }[graphType]());

    setGraphType(graphType);

    return () => {
      setGraphType(null);

      setPortraitOrientation();
    };
  }, []);

  return (
    <GraphScreen
      streams={streams}
      streamsLines={streamsLines}
      cumulativeEntity={cumulativeEntity}
      graphType={graphType}
      variant={graphType === 'combined' ? 'linear' : 'cumulative'}
    />
  );
};

export default compose(
  _.hoistStatics(GraphScreen),
  withReducer('marketStreams', reducer),
  withEpics('marketStreams', epics),
  withErrorBoundary('marketStreams:graph-screen'),
  withNavigationSync(),
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(Connected) as React.FC<TPropsExternal>;