import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { createStructuredSelector } from 'reselect';
import { GraphScreen } from '../components/graph-screen';
import reducer from '../reducer';
import { makeGraphsSelector } 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 {
  TGraphCard,
  TGraphType,
  TNavGraphProps,
  TRootPlaylistPerformanceState,
} from '../types';
import { ROUTE_PARAMS } from '../../app/constants';
import { TVendor } from '../../common/types';

type TStructured = {
  graphCards: TGraphCard[];
} & TNavGraphProps;

export type TPropsExternal = {};

export type TPropsConnected = TStructured & TPropsExternal & {};

const mapStateToProps = createStructuredSelector<
  TRootPlaylistPerformanceState,
  TStructured
  // @ts-ignore
>({
  graphCards: makeGraphsSelector(),
  //†prop
});
const mapDispatchToProps = {
  // action1: ACTION.action1,
  //†action
};

// Uncomment to write componentDidMount hook
const Connected: React.FC<TPropsConnected> = props => {
  const { graphCards, route } = props;
  const graphType: TGraphType = _.path([
    'params',
    ROUTE_PARAMS.playlistrootGraph,
  ])(route);
  const vendor: TVendor = _.path(['params', ROUTE_PARAMS.playlistrootVendor])(
    route
  );
  const graphCard = _.find({ id: graphType }, graphCards);

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

  useEffect(() => {
    setLandscapeOrientation();

    return () => {
      setPortraitOrientation();
    };
  }, []);

  // @ts-ignore
  return <GraphScreen graphCard={graphCard} />;
};

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