import React, { ComponentClass, FC, useEffect } from "react";
import * as R from "ramda";
import { DispatchProp } from "react-redux";

import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks";

import { mapAndSplit } from "@applicaster/zapp-react-native-utils/arrayUtils";

import {
  DATASOURCE_CHUNKS,
  getDatasourceUrl,
  ignoreComponentsWithClearCacheFlag,
  loadDatasources,
  usePipesContexts,
} from "./utils";

type RiverProps = {
  dispatch: DispatchProp;
  river: ZappRiver;
};

type ZappComponent = FC<any> | ComponentClass<any>;

export function WithRiverFeedLoader(Component: ZappComponent) {
  return function WrappedWithRiverFeedLoader(props: RiverProps) {
    const { river } = props;
    const { screenData, pathname } = useRoute();

    const pipesContexts = usePipesContexts(river.id, pathname);

    const componentsToLoad = ignoreComponentsWithClearCacheFlag(
      river?.ui_components || []
    );

    useEffect(() => {
      const dataSources = R.compose(
        R.map(R.reject(R.isEmpty)),
        mapAndSplit(
          getDatasourceUrl({
            screenData,
            ...pipesContexts,
          }),
          DATASOURCE_CHUNKS
        )
      )(componentsToLoad);

      // TODO Refactor with Ramda
      const nonEmptyDataSources = dataSources.map((item) =>
        item?.filter((item2) => item2 !== undefined)
      );

      loadDatasources(nonEmptyDataSources, river?.id, props.dispatch);
    }, []);

    return <Component {...props} />;
  };
}