import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { createStructuredSelector } from 'reselect';
import { withNavigation } from '../../common/hoc/with-navigation';
import { Tab1 } from '../components/tab1';
// import { ACTION } from '../reducer';
import { PAGES, updatePageMeta } from '../../analytics';
import { TOP_FIVE_MARKETS_TAB } from '../constants';
// import { fp as _ } from '../../common/utils/fp';
// import { make___Selector } from '../selectors';

const mapStateToProps = createStructuredSelector({
  // prop1: makeSelector(),
  //†prop
});
const mapDispatchToProps = {
  // action1: ACTION.action1,
  //†action
};

type TProps = {
  show: boolean;
  onCardClick: (market: string) => void;
};

// Uncomment to write componentDidMount hook
const Connected: React.FC<TProps> = ({ show, ...props }) => {
  // const cvendor = _.path('state.params.cvendor', navigation);

  useEffect(() => {
    setTimeout(() => {
      updatePageMeta({
        page: PAGES.Marketstab.page,
        tab_opened: TOP_FIVE_MARKETS_TAB,
      });
    });
  }, []);

  if (!show) return null;

  return <Tab1 {...props} />;
};

export default compose<any>(
  connect(
    mapStateToProps,
    mapDispatchToProps
  ),
  withNavigation
)(Connected) as React.FC<TProps>;