import React from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { createStructuredSelector } from 'reselect';
import { Undefinable } from 'tsdef';
import { withReducer } from '../../app/core/with-reducer';
import { withEpics } from '../../app/core/with-epics';
import { fp as _ } from '../../common/utils/fp';
import { YoutubeMarkets } from '../components';
import reducer, { ACTION } from '../reducer';
import * as epics from '../epics';
import { withErrorBoundary } from '../../common/hoc/with-error-boundary';
import {
  makeMarketsDataSelector,
  makeMarketsVisibilitySelector,
  makeYoutubePageVariantSelector,
} from '../selectors';
import { TRootTrackPlaylistsState, TState } from '../types';
import { getCustomRangeEntity } from '../../common/transducers';
import { DATE_RANGES } from '../../common/constants';
import { ContextHeader, ContextMarkets } from '../contexts';
import { composeContexts } from '../../common/utils/react-better-context';
import { TData, TState as TTrackState } from '../../track/types';
import { makeDataSelector, makeRefreshSelector } from '../../youtube/selectors';
import { TEntityVisibility } from '../../common/types';
import {
  makeStreamsLatestDateSelector,
  makeVideoRankSelector,
} from '../../youtube-list/selectors';
import {
  TEntityStreamsLatestDate,
  TState as TYoutubeListState,
} from '../../youtube-list/types';
import { makeTrackDataSelector } from '../../track/selectors';
import { TState as TYoutubeState } from '../../youtube/types';

type TStructured = {
  entity: TState['markets'];
  lastStreamDate: TEntityStreamsLatestDate;
  globalRefresh: TTrackState['refresh'];
  marketsVisibility: TEntityVisibility;
  youtubeData: TYoutubeState['data'];
  trackData: TData | {};
  videoRank: TYoutubeListState['videoRank'];
  youtubePageVariant: Undefinable<string>;
};
type TConnected = TStructured & {
  getMarkets: () => void;
};
type TPropsExternal = {};

const mapStateToProps = createStructuredSelector<
  TRootTrackPlaylistsState,
  TStructured
>({
  entity: makeMarketsDataSelector(),
  lastStreamDate: makeStreamsLatestDateSelector(),
  globalRefresh: makeRefreshSelector(),
  marketsVisibility: makeMarketsVisibilitySelector(),
  youtubeData: makeDataSelector(),
  trackData: makeTrackDataSelector(),
  videoRank: makeVideoRankSelector(),
  youtubePageVariant: makeYoutubePageVariantSelector(),
  //†prop
});
const mapDispatchToProps = {
  getMarkets: ACTION.getMarkets,
  //†action
};

const Connected: React.FC<TConnected> = ({ ...rest }) => {
  const {
    entity,
    lastStreamDate,
    marketsVisibility,
    youtubeData,
    trackData,
    videoRank,
    youtubePageVariant,
  } = rest;
  const lastDate = _.path('data.date', lastStreamDate);

  if (marketsVisibility.offline) return null;

  const { globalRefresh } = rest;

  return composeContexts(
    [
      [
        ContextHeader,
        {
          visibility: marketsVisibility,
          refresh: globalRefresh,
          dateRange: getCustomRangeEntity(DATE_RANGES.WEEKS_2, lastDate).api,
          youtubeVariant: youtubePageVariant,
        },
      ],
      [
        ContextMarkets,
        {
          entity,
          refresh: globalRefresh,
          visibility: marketsVisibility,
          dateRange: getCustomRangeEntity(DATE_RANGES.WEEKS_2, lastDate).api,
          youtubeData,
          trackData,
          videoRank,
          youtubePageVariant,
        },
      ],
    ],
    <YoutubeMarkets />
  );
};

export default compose(
  _.hoistStatics(YoutubeMarkets),
  withReducer('youtubeMarkets', reducer),
  withEpics('youtubeMarkets', epics),
  withErrorBoundary('youtubeMarkets'),
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(Connected) as React.FC<TPropsExternal>;