import React from 'react';
// import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { createStructuredSelector } from 'reselect';
import { NotificationsSettings } from '../components/notification-settings';
// import { ACTION } from '../reducer';
import { withErrorBoundary } from '../../common/hoc/with-error-boundary';
import { TNotificationSettinsRootState, TRoute } from '../types';

import { useNavKeyMap } from '../../common/hooks/use-nav-key-map';
import { ROUTES } from '../../app/constants';
import { withNavigationSync } from '../../common/hoc/with-navigation-sync';
// import { make___Selector } from '../selectors';

type TPropsExternal = {};
type TStructured = {};
type TConnected = TPropsExternal &
  TStructured & {
    route: TRoute;
  };

const mapStateToProps = createStructuredSelector<
  TNotificationSettinsRootState,
  TStructured
>({
  //†prop
});
const mapDispatchToProps = {
  //†action
};

const Connected: React.FC<TConnected> = ({ route, ...rest }) => {
  //
  // useEffect(() => {
  //   getNotificationSettings();
  //
  //   return () => {
  //     flush();
  //   };
  // }, []);

  // const { markets } = rest;
  useNavKeyMap({ page: ROUTES.notificationsettings, route });

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

export default compose(
  withErrorBoundary('notificationsSettings'),
  withNavigationSync(),
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(Connected);