import { connect } from 'react-redux';
// import {lifecycle} from 'recompose';
import React from 'react';
import { NavigationProp, ParamListBase } from '@react-navigation/native';
import { createStructuredSelector } from 'reselect';
import { Undefinable } from 'tsdef';
import { Profile } from '../components/profile';
import { fp as _ } from '../../common/utils/fp';
import { ACTION } from '../reducer';
// import { make___Selector } from '../selectors';
import { ACTION as COMMON_ACTION } from '../../common/reducer';
import { ACTION as NOTIFICATION_SETTINGS_ACTION } from '../../notification-settings/reducer';
import { withErrorBoundary } from '../../common/hoc/with-error-boundary';
import { withNavigationSync } from '../../common/hoc/with-navigation-sync';
import { makeMarketNameShortSelector } from '../../common/selectors';
import { TProfileRootState, TRoute, TState } from '../types';
import { useNavKeyMap } from '../../common/hooks/use-nav-key-map';
import { ROUTES } from '../../app/constants';
import { makeRefreshSelector } from '../selectors';
import { makeNotificationSettingsSelector } from '../../notification-settings/selectors';
import { TState as TNotificationSettingsState } from '../../notification-settings/types';
import { useNavigationFlush } from '../../common/hooks/use-navigation-flush';

import { makeDecodedSelector } from '../../auth/selectors';
import { TUserData } from '../../auth/types';
import { useSentryRenderRecursionDetector } from '../../common/utils/debuggers/sentry-logger';

type TStructured = {
  marketName: Undefinable<string>;
  refreshing: TState['refresh'];
  notificationSettings: TNotificationSettingsState['notificationSettings'];
  userData: TUserData;
};

export type TPropsConnected = TStructured & {
  logout: () => void;
  feedbackPressed: () => void;
  route: TRoute;
  refresh: () => void;
  getNotificationSettings: () => void;
  navigation: NavigationProp<ParamListBase>;
};

const mapStateToProps = createStructuredSelector<
  TProfileRootState,
  TStructured
>({
  marketName: makeMarketNameShortSelector(),
  refreshing: makeRefreshSelector(),
  notificationSettings: makeNotificationSettingsSelector(),
  userData: makeDecodedSelector(),
  //†prop
});
const mapDispatchToProps = {
  logout: COMMON_ACTION.logout,
  feedbackPressed: ACTION.feedbackPressed,
  refresh: ACTION.refresh,
  getNotificationSettings: NOTIFICATION_SETTINGS_ACTION.getNotificationSettings,
  //†action
};
const Connected: React.FC<TPropsConnected> = ({
  getNotificationSettings,
  ...rest
}) => {
  const { route, navigation } = rest;

  useSentryRenderRecursionDetector('profile');

  useNavigationFlush({
    getData: getNotificationSettings,
    flush: () => {},
    navigation,
    route,
  });

  useNavKeyMap({ page: ROUTES.profile, route });

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

export default _.compose(
  _.hoistStatics(Profile),
  withErrorBoundary('profile'),
  withNavigationSync(),
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(Connected) as React.FC;