import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { createStructuredSelector } from 'reselect';
import { withReducer } from '../../app/core/with-reducer';
import { withEpics } from '../../app/core/with-epics';
import { fp as _ } from '../../common/utils/fp';
import { TracklistScreen } from '../../playlist-tracklist-core/components/tracklist-screen';
import reducer, { ACTION } from '../reducer';
import { ACTION as PARENT_ACTION } from '../../playlist/reducer';
import * as epics from '../epics';
import { withErrorBoundary } from '../../common/hoc/with-error-boundary';
import { withNavigationSync } from '../../common/hoc/with-navigation-sync';
import {
  makeRefreshSelector,
  makeTracklistExtendedSelector,
  makeActiveVisibilitySelector,
} from '../selectors';
import { TRootPlaylistSearchState, TRoute } from '../types';
import { NEntityInfinite, TRouteParams } from '../../common/types';
import { makeTracklistExtendedSelector as parentMakeTracklistExtendedSelector } from '../../playlist/selectors';
import { makeRoutingParamsSelector } from '../../common/selectors';
import { useNavKeyMap } from '../../common/hooks/use-nav-key-map';
import { ROUTE_PARAMS, ROUTES } from '../../app/constants';
import { withStreamLatestDate } from '../../common/hoc/with-stream-latest-date';
import { withStarred } from '../../common/submodules/starring-tracks/hoc/with-starred';
import {
  TActiveVisibilityConfig,
  TTracklistExtended,
} from '../../playlist-tracklist-core/types';
import { goToTrack } from '../../playlist/services';
import { TRACKLIST_SCREEN_VARIANT } from '../../playlist-tracklist-core/constants';

type TStructured = {
  activeVisibility: TActiveVisibilityConfig;
  refreshing: boolean;
  tracklist: TTracklistExtended;
  tracklistParent: TTracklistExtended;
  routeParams?: TRouteParams;
};
type TConnected = TStructured & {
  getTracklist: NEntityInfinite.TEntityInfiniteGet;
  getTracklistParent: NEntityInfinite.TEntityInfiniteGet;
  flush: () => void;
  refresh: () => void;
  route: TRoute;
};
type TPropsExternal = {};

const mapStateToProps = createStructuredSelector<
  TRootPlaylistSearchState,
  TStructured
>({
  activeVisibility: makeActiveVisibilitySelector(),
  refreshing: makeRefreshSelector(),
  tracklist: makeTracklistExtendedSelector(),
  tracklistParent: parentMakeTracklistExtendedSelector(),
  routeParams: makeRoutingParamsSelector(),
  //†prop
});
const mapDispatchToProps = {
  getTracklist: ACTION.getTracklist,
  getTracklistParent: PARENT_ACTION.getTracklist,
  flush: ACTION.flush,
  refresh: ACTION.refresh,
  //†action
};

const Connected: React.FC<TConnected> = ({
  getTracklist,
  getTracklistParent,
  flush,
  activeVisibility,
  ...rest
}) => {
  const { route } = rest;

  useNavKeyMap({ page: ROUTES.playlistsearch, route });

  useEffect(() => {
    return () => flush();
  }, []);

  return (
    <TracklistScreen
      {...rest}
      variant={TRACKLIST_SCREEN_VARIANT.playlist}
      onCardPress={goToTrack}
      playlistVendor={_.path(
        ['params', ROUTE_PARAMS.playlistrootVendor],
        route
      )}
      getTracklist={getTracklist}
      getTracklistParent={getTracklistParent}
      visibility={activeVisibility.visibility}
    />
  );
};

export default compose(
  _.hoistStatics(TracklistScreen),
  withReducer('playlistSearch', reducer),
  withEpics('playlistSearch', epics),
  withErrorBoundary('playlistSearch'),
  withNavigationSync(),
  withStreamLatestDate,
  withStarred,
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(Connected) as React.FC<TPropsExternal>;