import React, { useEffect } from "react";
import { PreloaderWrapper } from "../PreloaderWrapper";
import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
import { useFeedLoader } from "@applicaster/zapp-react-native-utils/reactHooks";

import { componentsLogger } from "../../Helpers/logger";

const logger = componentsLogger.addSubsystem("ScreenFeedLoader");

/** Loads and provides `feedData` and store to  */
export const ScreenFeedLoader: React.FC<
  React.PropsWithChildren<{ id: string; feedData: any }>
> = ({ id, feedData, children }) => {
  const { source: feedUrl, mapping } = feedData;

  const { data, loading, error } = useFeedLoader({
    feedUrl,
    mapping,
    pipesOptions: {},
  });

  const feedStore = useScreenContextV2()._feedStore;

  useEffect(() => {
    if (data && !loading) {
      feedStore.setState({ screenFeed: data, screenFeedError: null });

      logger.log("screenFeed set for active screen", { data, screenId: id });
    }

    if (error && !loading) {
      feedStore.setState({ screenFeed: data, screenFeedError: error });

      logger.warning("Feed data error:", {
        data,
        loading,
        error,
        screenId: id,
      });
    }
  }, [data, loading, error, feedStore, id]);

  return (
    <PreloaderWrapper showPreloader={loading}>{children}</PreloaderWrapper>
  );
};