import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { createStructuredSelector } from 'reselect';
import { NotificationsIndicator } from '../components/notifications-indicator';
import { ACTION } from '../reducer';
import { makeIsAnyNewNotificationSelector } from '../selectors';
import { withErrorBoundary } from '../../common/hoc/with-error-boundary';
import { TRootNotificationsState, TState } from '../types';
// import { make___Selector } from '../selectors';

type TStructured = {
  isAnyNewNotification: TState['isAnyNewNotification'];
};

type TPropsExternal = {
  focused: boolean;
};

type TConnected = TStructured &
  TPropsExternal & {
    checkIncomingNotifications: () => void;
  };

const mapStateToProps = createStructuredSelector<
  TRootNotificationsState,
  TStructured
>({
  // prop1: makeSelector(),
  isAnyNewNotification: makeIsAnyNewNotificationSelector(),
  //†prop
});
const mapDispatchToProps = {
  checkIncomingNotifications: ACTION.checkIncomingNotifications,
  // action1: ACTION.action1,
  //†action
};

// Uncomment to write componentDidMount hook
const Connected: React.FC<TConnected> = ({
  checkIncomingNotifications,
  focused,
  ...rest
}) => {
  useEffect(() => {
    if (!focused) {
      checkIncomingNotifications();
    }
  }, []);
  return <NotificationsIndicator {...rest} />;
};

export default compose(
  withErrorBoundary('notifications:notifications-indicator'),
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(Connected) as React.FC<TPropsExternal>;