import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { createStructuredSelector } from 'reselect';
import { withReducer } from '../../app/core/with-reducer';
import { withEpics } from '../../app/core/with-epics';
import reducer, { ACTION } from '../reducer';
import * as epics from '../epics';
import { withErrorBoundary } from '../../common/hoc/with-error-boundary';
import { EventBus } from '../services/event-bus';
import { CUSTOM_EVENTS } from '../constants';
import { TProps } from '../types';

const mapStateToProps = createStructuredSelector({
  // prop1: makeSelector(),
  //†prop
});
const mapDispatchToProps = {
  init: ACTION.init,
  updatePageMeta: ACTION.updatePageMeta,
  pageEnter: ACTION.pageEnter,
  pageExit: ACTION.pageExit,
  pageClick: ACTION.pageClick,
  //†action
};

// Uncomment to write componentDidMount hook
const Connected: React.FC<TProps> = ({
  init,
  updatePageMeta,
  pageEnter,
  pageExit,
  pageClick,
}) => {
  useEffect(() => {
    init();

    const unsub1 = EventBus.on(CUSTOM_EVENTS.PAGE_UPDATE, updatePageMeta);
    const unsub2 = EventBus.on(CUSTOM_EVENTS.PAGE_ENTER, pageEnter);
    const unsub3 = EventBus.on(CUSTOM_EVENTS.PAGE_EXIT, pageExit);
    const unsub4 = EventBus.on(CUSTOM_EVENTS.PAGE_CLICK, pageClick);

    return () => {
      unsub1();
      unsub2();
      unsub3();
      unsub4();
    };
  }, []);
  return null;
};

export default compose(
  withReducer('analytics', reducer),
  withEpics('analytics', epics),
  withErrorBoundary('analytics'),
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(Connected) as React.FC<any>;