import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { createStructuredSelector } from 'reselect';
import { Undefinable } from 'tsdef';
import { GraphScreen } from '../components/graph-screen';
import reducer from '../reducer';
import {
  makeViewsExtendedCumulativeSelector,
  makeYoutubeParamsSelector,
} 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 { withNavigationSync } from '../../common/hoc/with-navigation-sync';
import {
  setLandscapeOrientation,
  setPortraitOrientation,
} from '../../common/utils/device-utils';
import { TEntity, TRouteParams } from '../../common/types';
import { TRootYoutubePerformanceState } from '../types';
import { makeDataSelector } from '../../youtube/selectors';
import { makeVideoRankSelector } from '../../youtube-list/selectors';
import { TRoute, TState as TYoutubeState } from '../../youtube/types';
import { TState as TYoutubeListState } from '../../youtube-list/types';
import { ROUTE_PARAMS } from '../../app/constants';
import { SINGLE_VARIANT } from '../../youtube/constants';
import { ANALYTICS_EMPTY_VALUE } from '../../analytics/constants';

type TStructured = {
  views: TEntity;
  trackParams: Undefinable<TRouteParams>;
  youtubeData: TYoutubeState['data'];
  videoRank: TYoutubeListState['videoRank'];
};

export type TPropsExternal = {
  route: TRoute;
};

export type TPropsConnected = TStructured & TPropsExternal & {};

const mapStateToProps = createStructuredSelector<
  TRootYoutubePerformanceState,
  TStructured
>({
  views: makeViewsExtendedCumulativeSelector(),
  trackParams: makeYoutubeParamsSelector(),
  youtubeData: makeDataSelector(),
  videoRank: makeVideoRankSelector(),
  //†prop
});
const mapDispatchToProps = {
  // action1: ACTION.action1,
  //†action
};

// Uncomment to write componentDidMount hook
const Connected: React.FC<TPropsConnected> = props => {
  const { views, trackParams, videoRank, youtubeData, route } = props;
  const { params: routeParams } = route;

  useEffect(() => {
    const youtubeVariant = _.path(ROUTE_PARAMS.youtubeVariant, routeParams);
    const isSingle = youtubeVariant === SINGLE_VARIANT;

    updatePageMeta({
      page: PAGES.Youtubegraph.page,
      source_track_id: _.path('trackId', trackParams),
      source_track_isrc: _.path('isrc', trackParams),
      source_track_name: _.path('name', trackParams),
      video_id: isSingle
        ? _.path('data.id', youtubeData)
        : ANALYTICS_EMPTY_VALUE,
      video_name: isSingle
        ? _.path('data.title', youtubeData)
        : ANALYTICS_EMPTY_VALUE,
      video_source_type: isSingle
        ? _.compose(
            _.toUpperSafe,
            _.path('data.source')
          )(youtubeData)
        : ANALYTICS_EMPTY_VALUE,
      video_rank: isSingle ? videoRank : ANALYTICS_EMPTY_VALUE,
      variant: youtubeVariant,
    });
  }, []);

  useEffect(() => {
    setLandscapeOrientation();

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

  return <GraphScreen cumulativeEntity={views} />;
};

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