import React, { useEffect } from 'react';
import { connect } from 'react-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 { List, TProps as ListProps } from '../components/list';
import reducer, { ACTION } from '../reducer';
import { ACTION as COMMON_ACTION } from '../../common/reducer';
import * as epics from '../epics';
import { updateHomeListAnalytics } from '../services';
import {
  makeIsAnyAdditionsSelector,
  makeIsAnyMovesSelector,
  makeIsAnyRemovalsSelector,
  makeLoadingSelector,
  makeIsRefreshingSelector,
  makeVisibilityConfigSelector,
  makeMarketNameSelector,
  makeAdditionsExtendedSelector,
  makeRemovalsExtendedSelector,
} from '../selectors';
import { withErrorBoundary } from '../../common/hoc/with-error-boundary';
import { withNavigationSync } from '../../common/hoc/with-navigation-sync';
import { THomeCategories, THomeRootState, TVisibility } from '../types';
import { TTracksSimpleExtended } from '../../common/types';
import { useNavKeyMap } from '../../common/hooks/use-nav-key-map';
import { ROUTE_PARAMS, ROUTES } from '../../app/constants';
import { withStarred } from '../../common/submodules/starring-tracks/hoc/with-starred';

type TComposeConnection = {};

// Uncomment to write componentDidMount hook
const Connected = (params: TComposeConnection & ListProps) => {
  const { route } = params;
  const vendor = _.path(`params.${ROUTE_PARAMS.homeVendor}`, route);
  const type = _.path('params.type', route) === 'exits' ? 'Exits' : 'Entries';

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

  useEffect(() => {
    updateHomeListAnalytics(vendor, type);
  }, []);

  return <List {...params} />;
};

const mapStateToProps = createStructuredSelector<
  THomeRootState,
  {
    isAnyAddition: boolean;
    isAnyRemovals: boolean;
    isAnyMoves: boolean;
    additions: TTracksSimpleExtended[];
    removals: TTracksSimpleExtended[];
    loading: THomeCategories;
    refreshing: boolean;
    visibility: TVisibility;
    marketName: Undefinable<string>;
  }
>({
  // prop1: makeSelector(),
  isAnyAddition: makeIsAnyAdditionsSelector(),
  isAnyRemovals: makeIsAnyRemovalsSelector(),
  isAnyMoves: makeIsAnyMovesSelector(),
  additions: makeAdditionsExtendedSelector(),
  removals: makeRemovalsExtendedSelector(),
  loading: makeLoadingSelector(),
  refreshing: makeIsRefreshingSelector(),
  visibility: makeVisibilityConfigSelector(),
  marketName: makeMarketNameSelector(),
  //†prop
});
const mapDispatchToProps = {
  // action1: ACTION.action1,
  getData: ACTION.getData,
  toggleStarred: COMMON_ACTION.toggleStarred,
  refresh: ACTION.refresh,
  //†action
};

export default _.compose(
  _.hoistStatics(List),
  withReducer('home', reducer),
  withEpics('home', epics),
  withErrorBoundary('home:homelist'),
  withNavigationSync(),
  withStarred,
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(Connected);