import React 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 { TrackVideo } from '../components';
import reducer, { ACTION } from '../reducer';
import * as epics from '../epics';
import { withErrorBoundary } from '../../common/hoc/with-error-boundary';
import {
  makeYoutubeSelector,
  makeYoutubeVisibilityConfigSelector,
  makeTiktokSelector,
  makeTiktokVisibilityConfigSelector,
} from '../selectors';
import { TEntityVisibility } from '../../common/types';
import { TState } from '../types';
import { makeTrackSelector } from '../../track/selectors';
import { TState as TTrackState } from '../../track/types';

type TStructured = {
  youtubeVisibility: TEntityVisibility;
  tiktokVisibility: TEntityVisibility;
  youtube: TState['youtube'];
  tiktok: TState['tiktok'];
  track: TTrackState['track'];
};
type TConnected = TStructured & {
  flush: () => void;
  refresh: () => void;
};
type TPropsExternal = {};

const mapStateToProps = createStructuredSelector<TStructured>({
  youtubeVisibility: makeYoutubeVisibilityConfigSelector(),
  tiktokVisibility: makeTiktokVisibilityConfigSelector(),
  youtube: makeYoutubeSelector(),
  tiktok: makeTiktokSelector(),
  track: makeTrackSelector(),
  //†prop
});
const mapDispatchToProps = {
  refresh: ACTION.refresh,
  //†action
};

const Connected: React.FC<TConnected> = ({ ...rest }) => {
  return <TrackVideo {...rest} />;
};

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