import React from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { createStructuredSelector } from 'reselect';
import { Nullable } from 'tsdef';
import { withReducer } from '../../app/core/with-reducer';
import { withEpics } from '../../app/core/with-epics';
import { fp as _ } from '../../common/utils/fp';
import { TrackMarkets } from '../components/track-markets';
import reducer from '../reducer';
import * as epics from '../epics';
import { withErrorBoundary } from '../../common/hoc/with-error-boundary';
import {
  makeEmptyDataSelector,
  makeMarketKpiDataSelector,
  makeVisibilityConfigSelector,
} from '../selectors';
import { makeErrorGlobalSelector } from '../../track/selectors';
import { TNavProps, TTrackMarketsRootState, TVisibility } from '../types';
import { TMarketName } from '../../market-kpi/types';
import { NMarket } from '../../common/types';

type TStructured = {
  cards: Nullable<NMarket.TMarketItem>[];
  visibility: TVisibility;
  globalError: boolean;
  emptyData: Record<string, TMarketName>;
};

type TConnected = TStructured & {
  flush: () => void;
} & TNavProps;

type TPropsExternal = {};

const mapStateToProps = createStructuredSelector<
  TTrackMarketsRootState,
  TStructured
>({
  cards: makeMarketKpiDataSelector(),
  visibility: makeVisibilityConfigSelector(),
  globalError: makeErrorGlobalSelector(),
  emptyData: makeEmptyDataSelector(),
  //†prop
});
const mapDispatchToProps = {
  // getData: ACTION.getData,
  // flush: ACTION.flush,
  //†action
};

// Uncomment to write componentDidMount hook
const Connected: React.FC<TConnected> = ({ globalError, ...rest }) => {
  if (globalError) return null;
  return <TrackMarkets {...rest} />;
};

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