import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { createStructuredSelector } from 'reselect';
import { NavigationProp, ParamListBase } from '@react-navigation/native';
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 { Youtubelist } from '../components';
import reducer, { ACTION } from '../reducer';
import * as epics from '../epics';
import { withErrorBoundary } from '../../common/hoc/with-error-boundary';
import { withNavigationSync } from '../../common/hoc/with-navigation-sync';
import {
  makeVisibilityConfigSelector,
  makeRefreshSelector,
  makeDataSelector,
  makeStreamsLatestDateSelector,
} from '../selectors';
// import { useNavigationFlush } from '../../common/hooks/use-navigation-flush';
import { TEntityStreamsLatestDate, TSetVideoRank, TState } from '../types';
import { TData as TTrackData } from '../../track/types';
import { TEntityVisibility, TRouteParams } from '../../common/types';
import { makeTrackDataSelector } from '../../track/selectors';
import { makeRoutingParamsSelector } from '../../common/selectors';
import { composeContexts } from '../../common/utils/react-better-context';
import { ContextAllVideos, ContextListItem } from '../context';

type TPropsExternal = {};
type TStructured = {
  visibility: TEntityVisibility;
  refreshing: boolean;
  data: TState['data'];
  trackData: TTrackData | {};
  streamsLatestDate: TEntityStreamsLatestDate;
  routingParams: Undefinable<TRouteParams>;
};
type TConnected = TPropsExternal &
  TStructured & {
    getData: () => void;
    getStreamsLatestData: () => void;
    flush: () => void;
    refresh: () => void;
    navigation: NavigationProp<ParamListBase>;
    setVideoRank: TSetVideoRank;
  };

const mapStateToProps = createStructuredSelector<TStructured>({
  visibility: makeVisibilityConfigSelector(),
  refreshing: makeRefreshSelector(),
  data: makeDataSelector(),
  trackData: makeTrackDataSelector(),
  streamsLatestDate: makeStreamsLatestDateSelector(),
  routingParams: makeRoutingParamsSelector(),
  //†prop
});
const mapDispatchToProps = {
  getData: ACTION.getData,
  getStreamsLatestData: ACTION.getStreamsLatestDate,
  flush: ACTION.flush,
  refresh: ACTION.refresh,
  setVideoRank: ACTION.setVideoRank,
  //†action
};

const Connected: React.FC<TConnected> = ({
  getData,
  getStreamsLatestData,
  flush,
  setVideoRank,
  routingParams,

  ...rest
}) => {
  // const { navigation } = rest;

  // useNavigationFlush({
  //   getData,
  //   flush,
  //   navigation,
  //   key: 'youtubelist',
  // });

  useEffect(() => {
    getData();
    getStreamsLatestData();

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

  return composeContexts(
    [
      [
        ContextListItem,
        {
          setVideoRank,
          trackParams: routingParams,
        },
      ],
      [
        ContextAllVideos,
        {
          trackParams: routingParams,
        },
      ],
    ],
    <Youtubelist {...rest} />
  );
};

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