import React from "react";
import * as R from "ramda";
import { selectZappPipes } from "@applicaster/zapp-react-native-redux";

type Props = {
  zappPipes: ReturnType<typeof selectZappPipes>;
  loadPipesData: ReturnType<
    typeof import("@applicaster/zapp-react-native-utils/reactHooks/feed").useLoadPipesDataDispatch
  >;
  feedUrl: string;
  children: (feed: ZappFeed) => React.ReactNode;
  onFeedLoaded: (feed: ZappFeed) => {};
  onError: (error: ZappPipesData["error"]) => {};
  refreshing: boolean;
  refreshCallback: () => void;
};

export class FeedLoaderComponent extends React.Component<Props> {
  componentDidMount() {
    this.loadFeed();

    const { onFeedLoaded, feedUrl } = this.props;
    const cachedFeed = R.path(["zappPipes", feedUrl, "data"], this.props);

    // Check if item is cached
    if (R.not(R.isNil(cachedFeed))) {
      onFeedLoaded && onFeedLoaded(cachedFeed);
    }
  }

  componentDidUpdate(prevProps) {
    if (
      !R.eqProps("feedUrl", prevProps, this.props) ||
      (this.props.refreshing && !prevProps.refreshing)
    ) {
      this.loadFeed();
    }

    const { onFeedLoaded, onError, zappPipes, feedUrl } = this.props;
    const feedLoadData = zappPipes[feedUrl];

    if (R.not(R.isNil(feedLoadData))) {
      const { data, error } = feedLoadData;

      const errorPath = ["zappPipes", feedUrl, "error"];

      if (
        !R.equals(R.path(errorPath, prevProps), R.path(errorPath, this.props))
      ) {
        onError && onError(error);
      }

      const dataPath = ["zappPipes", feedUrl, "data"];

      if (
        !R.equals(R.path(dataPath, prevProps), R.path(dataPath, this.props))
      ) {
        onFeedLoaded && onFeedLoaded(data);
      } else if (
        // Check if item is cached
        !R.eqProps("feedUrl", prevProps, this.props) &&
        R.path(dataPath, prevProps)
      ) {
        onFeedLoaded && onFeedLoaded(data);
      }
    }
  }

  loadFeed() {
    const { feedUrl, zappPipes, loadPipesData, refreshing, refreshCallback } =
      this.props;

    if (refreshing) {
      loadPipesData(feedUrl, {
        clearCache: true,
        callback: refreshCallback,
      });
    } else if (feedUrl && !zappPipes[feedUrl]) {
      loadPipesData(feedUrl);
    }
  }

  render() {
    const { zappPipes, feedUrl, children } = this.props;

    if (!feedUrl || !zappPipes[feedUrl]) {
      return children(null);
    }

    const { loading, data } = zappPipes[feedUrl];

    if (!loading && data) {
      return children(data);
    }

    return null;
  }
}