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 { Tab } from '../components/tab';
import { TRoute, TTabProps } from '../types';
// import { ACTION } from '../reducer';
import { PAGES, updatePageMeta } from '../../analytics';
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 TComposeConnection = {
  route: TRoute;
} & TTabProps;

// Uncomment to write componentDidMount hook
const Connected: React.FC<TComposeConnection> = ({ route, ...rest }) => {
  const cvendor = _.path('params.cvendor', route);

  useEffect(() => {
    setTimeout(() => {
      updatePageMeta({
        page: PAGES.Chartstab.page,
        dsp_type: _.capitalize(cvendor),
      });
    });
  }, []);

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

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