import React, { useMemo } from "react";
import { path } from "ramda";

import {
  useFeedLoader,
  useRivers,
} from "@applicaster/zapp-react-native-utils/reactHooks";

type Props = {
  screenId: string;
  screenData: ZappRiver | ZappEntry;
  feedUrl?: string;
  river?: ZappRiver | ZappEntry;
};

export const withPipesV1DataLoader = (
  WrappedComponent: React.ComponentType<any>
) => {
  return function WithPipesV1DataLoaderComponent(props: Props) {
    const { screenId, feedUrl } = props;

    const rivers = useRivers();

    const river = React.useMemo(() => rivers?.[screenId], [screenId]);

    const screenData = React.useMemo(
      () => props.screenData || props.river || river,
      [screenId]
    );

    const connectedScreenUrl = useMemo(() => {
      // Avoid using feedUrl or content.src on layouts v2

      return feedUrl || path(["content", "src"], screenData);
    }, [feedUrl, screenData]);

    const { data: feedData } = useFeedLoader({
      feedUrl: connectedScreenUrl,
    });

    return <WrappedComponent {...props} feedData={feedData} />;
  };
};