import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { createStructuredSelector } from 'reselect';
// import { NavigationStackProp } from 'react-navigation-stack';
import { Tab } from '../components/tab';
// import { ACTION } from '../reducer';
import { PAGES, updatePageMeta } from '../../analytics';
import { fp as _ } from '../../common/utils/fp';
import { TTabProps } from '../types';
import { ROUTE_PARAMS } from '../../app/constants';
// import { make___Selector } from '../selectors';
import { withNavigation } from '../../common/hoc/with-navigation';

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

type TComposeConnection = {
  route: any;
} & TTabProps;

// Uncomment to write componentDidMount hook
const Connected: React.FC<TComposeConnection> = ({ route, ...rest }) => {
  const vendor = _.path(`params.${ROUTE_PARAMS.homeVendor}`, route);

  useEffect(() => {
    if (!vendor) {
      return;
    }
    setTimeout(() => {
      updatePageMeta({
        page: PAGES.Hometab.page,
        dsp_type: _.capitalize(vendor),
      });
    });
  }, [vendor]);

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

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