import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { createStructuredSelector } from 'reselect';
import { Undefinable } from 'tsdef';
import { withReducer } from '../../app/core/with-reducer';
import { withEpics } from '../../app/core/with-epics';
import { fp as _ } from '../../common/utils/fp';
import { TiktokKpi } from '../components';
import reducer, { ACTION } from '../reducer';
import * as epics from '../epics';
import { withErrorBoundary } from '../../common/hoc/with-error-boundary';
import {
  makeMarketsSelector,
  makeTiktokParamsSelector,
  makeGraphSelector,
  makeTrendsVisibilitySelector,
  makeTrendsSelector,
} from '../selectors';
import { TMarkets, TRootTiktokKpiState, TSetMarkets, TState } from '../types';
import {
  ContextHeader,
  ContextPills,
  ContextGraph,
  ContextTrends,
} from '../contexts';
import { composeContexts } from '../../common/utils/react-better-context';
import {
  makeRefreshSelector,
  makeVisibilityConfigSelector,
} from '../../tiktok/selectors';
import { TState as TTiktokState } from '../../tiktok/types';
import { TEntityVisibility, TRouteParams } from '../../common/types';
import { ROUTE_PARAMS } from '../../app/constants';

type TStructured = {
  globalRefresh: TTiktokState['refresh'];
  tiktokVisibility: TEntityVisibility;
  markets: TMarkets;
  graph: TState['graph'];
  trendsEntity: TState['trends'];
  trendsVisibility: TEntityVisibility;
  tiktokParams: Undefinable<TRouteParams>;
};
type TConnected = TStructured & {
  setMarkets: TSetMarkets;
  getGraph: () => void;
};
type TPropsExternal = {};

const mapStateToProps = createStructuredSelector<
  TRootTiktokKpiState,
  TStructured
>({
  globalRefresh: makeRefreshSelector(),
  tiktokVisibility: makeVisibilityConfigSelector(),
  tiktokParams: makeTiktokParamsSelector(),
  markets: makeMarketsSelector(),
  graph: makeGraphSelector(),
  trendsVisibility: makeTrendsVisibilitySelector(),
  trendsEntity: makeTrendsSelector(),
  //†prop
});
const mapDispatchToProps = {
  setActiveTab: ACTION.setActiveTab,
  setMarkets: ACTION.setMarkets,
  getGraph: ACTION.getGraph,
  getTrends: ACTION.getTrends,
  //†action
};

const Connected: React.FC<TConnected> = ({
  tiktokVisibility,
  // tiktokListVisibility,
  ...rest
}) => {
  const {
    markets,
    setMarkets,
    graph,
    tiktokParams,
    trendsVisibility,
    trendsEntity,
  } = rest;

  if (tiktokVisibility.offline) return null;

  useEffect(() => {
    setMarkets({
      owner: (tiktokParams![ROUTE_PARAMS.marketCodeTiktok] as string) || 'all',
    });
  }, []);

  const { globalRefresh } = rest;

  return composeContexts(
    [
      [
        ContextHeader,
        {
          loading: tiktokVisibility.skeleton,
          // tiktokListLoading: tiktokListVisibility.skeleton,
          refresh: globalRefresh,
          tiktokParams,
        },
      ],
      [
        ContextPills,
        {
          markets,
          loading: tiktokVisibility.skeleton,
          // tiktokListLoading: tiktokListVisibility.skeleton,
          refresh: globalRefresh,
          tiktokParams,
        },
      ],
      [
        ContextGraph,
        {
          markets,
          graph,
          refresh: globalRefresh,
        },
      ],
      [
        ContextTrends,
        {
          visibility: trendsVisibility,
          trendsEntity,
          refresh: globalRefresh,
        },
      ],
    ],
    <TiktokKpi />
  );
};

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