import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { createStructuredSelector } from 'reselect';
import { NavigationProp } from '@react-navigation/native';
import { withReducer } from '../../app/core/with-reducer';
import { withEpics } from '../../app/core/with-epics';
import { fp as _ } from '../../common/utils/fp';
import { MarketsStreams } from '../components/markets-streams';
// import reducer, { ACTION } from '../reducer';
import reducer from '../reducer';
import * as epics from '../epics';
import { withErrorBoundary } from '../../common/hoc/with-error-boundary';
import {
  makeLineGraphSelector,
  makeVisibilitySelector,
  makeGraphsSelector,
} from '../selectors';
import { MODULE_NAME } from '../constants';
import {
  TMarketsStreamsEntity,
  TMarketsStreamsRootState,
  TVisibility,
} from '../types';
import { TGraph } from '../../graph/types';
import { TActiveTab } from '../../markets/types';
// import { make___Selector } from '../selectors';

type TStructured = {
  visibility: TVisibility;
  graph: TGraph;
  streams: TMarketsStreamsEntity[];
};

export type TPropsExternal = {};

export type TPropsConnected = TStructured &
  TPropsExternal & {
    flush: () => void;
    navigation: NavigationProp<any>;
    route: {
      params: {
        marketTab: TActiveTab;
      };
    };
  };

const mapStateToProps = createStructuredSelector<
  TMarketsStreamsRootState,
  TStructured
>({
  // prop1: makeSelector(),
  graph: makeLineGraphSelector(),
  visibility: makeVisibilitySelector(),
  streams: makeGraphsSelector(),
  //†prop
});
const mapDispatchToProps = {
  // action1: ACTION.action1,
  //†action
};

// Uncomment to write componentDidMount hook
const Connected: React.FC<TPropsConnected> = ({ flush, ...rest }) => {
  useEffect(() => {
    return () => {
      flush();
    };
  }, []);

  return <MarketsStreams {...rest} />;
};

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