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 { MarketDemographics } from '../components/market-demographics';
import reducer, { ACTION } from '../reducer';
import * as epics from '../epics';
import { withErrorBoundary } from '../../common/hoc/with-error-boundary';
import {
  makeVisibilityConfigSelector,
  makeTabSelector,
  makeAppleSelector,
  makeSpotifySelector,
} from '../selectors';
import {
  makeTrackDataSelector,
  makeErrorGlobalSelector,
} from '../../track/selectors';
import { makeDateRangeSelector } from '../../market/selectors';
import { TCustomRangeEntity, TVendor } from '../../common/types';
import {
  TParsedEntity,
  TRootStateMarketDemographics,
  TVisibility,
} from '../types';
import { TData } from '../../track/types';

type TProps = {
  range?: TCustomRangeEntity;
  spotify: TParsedEntity;
  apple: TParsedEntity;
  activeTab: TVendor;
  trackData: TData | {};
  visibility: TVisibility;
  globalError: boolean;
};

const mapStateToProps = createStructuredSelector<
  TRootStateMarketDemographics,
  TProps
>({
  visibility: makeVisibilityConfigSelector(),
  globalError: makeErrorGlobalSelector(),
  range: makeDateRangeSelector(),
  activeTab: makeTabSelector(),
  spotify: makeSpotifySelector(),
  apple: makeAppleSelector(),
  trackData: makeTrackDataSelector(),
  //†prop
});
const mapDispatchToProps = {
  flush: ACTION.flush,
  setTab: ACTION.setTab,
  //†action
};

type TPropsConnected = TProps & {
  flush: () => void;
  setTab: (variant: TVendor) => void;
};

// Uncomment to write componentDidMount hook
const Connected: React.FC<TPropsConnected> = ({
  flush,
  spotify,
  apple,
  globalError,
  ...rest
}) => {
  const { activeTab } = rest;

  useEffect(() => {
    return () => flush();
  }, []);

  if (globalError) {
    return null;
  }

  return (
    <MarketDemographics
      {...rest}
      entity={activeTab === 'spotify' ? spotify : apple}
    />
  );
};

export default compose(
  _.hoistStatics(MarketDemographics),
  withReducer('marketDemographics', reducer),
  withEpics('marketDemographics', epics),
  withErrorBoundary('marketDemographics'),
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(Connected) as React.FC;