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 { fp as _ } from '../../common/utils/fp';
import { TopSlider } from '../components/top-slider';
import reducer from '../reducer';
import * as epics from '../epics';
import { withErrorBoundary } from '../../common/hoc/with-error-boundary';
import { makeTrackSelector } from '../selectors';
import { TState as TTrackState } from '../types';
import { trackInfoPopoverOpened } from '../../analytics';

type TStructured = {
  track: TTrackState['track'];
};
type TConnected = TStructured & {};
type TPropsExternal = {};

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

const Connected: React.FC<TConnected> = ({ track, ...rest }) => {
  useEffect(() => {
    trackInfoPopoverOpened({
      source_track_id: _.path('data.id', track),
      source_track_isrc: _.path('data.isrc', track),
      source_track_name: _.path('data.name', track),
    });
  }, []);

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

export default compose(
  _.hoistStatics(TopSlider),
  withReducer('track', reducer),
  withEpics('track', epics),
  withErrorBoundary('track'),
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(Connected) as React.FC<TPropsExternal>;