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 { Charts } from '../components/charts';
import reducer, { ACTION } from '../reducer';
import * as epics from '../epics';
import {
  makeActiveTabSelector,
  makeDateSelector,
  makeFiltersSelector,
  makeFiltersTitleSelector,
  makeOwnerOptionsSelector,
  makeRefreshSelector,
  makeVisibilitySelector,
  makeItemsWithStreamSelector,
  makeHomeMarketSelector,
} from '../selectors';
import { makeMarketSelector } from '../../common/selectors';
import { withErrorBoundary } from '../../common/hoc/with-error-boundary';
import { PAGES, updatePageMeta } from '../../analytics';
import { withNavigationSync } from '../../common/hoc/with-navigation-sync';
import { useOnUserMarketChange } from '../../common/hooks/use-on-user-market-change';
import {
  TChartsRootState,
  TOption,
  TFilters,
  TState,
  TTabUndef,
  TVisibility,
  TRoute,
} from '../types';
import { TMarketUndef, TTrackWithStream, TVendor } from '../../common/types';
import { useNavKeyMap } from '../../common/hooks/use-nav-key-map';
import { ROUTES } from '../../app/constants';
import { Router } from '../../common/utils/navigation-service';
import { ACTION as COMMON_ACTION } from '../../common/reducer';
import { withStarred } from '../../common/submodules/starring-tracks/hoc/with-starred';

type TStructured = {
  items: TTrackWithStream[];
  visibility: TVisibility;
  refreshing: boolean;
  activeTab: TTabUndef;
  filters: TFilters;
  ownersOptions: TOption[];
  filterTitle: string;
  date: string;
  market: TMarketUndef;
  homeMarket: TMarketUndef;
};

type TConnected = TStructured & {
  getData: () => void;
  flush: (state?: TState | null, meta?: string) => TState;
  selectTab: (value: string) => void;
  route: TRoute;
  refresh: () => void;
  toggleStarred: () => void;
  setFilter: () => void;
};

const mapStateToProps = createStructuredSelector<TChartsRootState, TStructured>(
  {
    items: makeItemsWithStreamSelector(),
    visibility: makeVisibilitySelector(),
    refreshing: makeRefreshSelector(),
    activeTab: makeActiveTabSelector(),
    filters: makeFiltersSelector(),
    ownersOptions: makeOwnerOptionsSelector(),
    filterTitle: makeFiltersTitleSelector(),
    date: makeDateSelector(),
    market: makeMarketSelector(),
    homeMarket: makeHomeMarketSelector(),
    //†prop
  }
);
const mapDispatchToProps = {
  getData: ACTION.getData,
  unstarTrack: ACTION.unstarTrack,
  refresh: ACTION.refresh,
  flush: ACTION.flush,
  selectTab: ACTION.selectTab,
  toggleStarred: COMMON_ACTION.toggleStarred,
  setFilter: ACTION.setFilter,
  //†action
};

// Uncomment to write componentDidMount hook
const Connected = ({ getData, flush, selectTab, ...rest }: TConnected) => {
  const { route } = rest;
  const cvendor = _.path('params.cvendor', route);

  const selectTabWithRouter = (cvendor: TVendor) => {
    Router.goTo(ROUTES.charts, { cvendor });
    selectTab(cvendor);
  };

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

  useOnUserMarketChange({
    page: ROUTES.charts,
    onChange: () => {
      flush(null, 'partial');
      getData();
    },
  });

  useEffect(() => {
    selectTab(cvendor);
    updatePageMeta({
      page: PAGES.Charts.page,
      source_dsp_type: _.capitalize(cvendor),
    });

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

  return <Charts {...rest} selectTab={selectTabWithRouter} />;
};

export default compose(
  _.hoistStatics(Charts),
  withReducer('charts', reducer),
  withEpics('charts', epics),
  withErrorBoundary('charts'),
  withStarred,
  withNavigationSync(),
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(Connected);