import React from "react";
import * as R from "ramda";

import { applyDecorators } from "../../Decorators";

import {
  useCellResolver,
  useComponentResolver,
} from "@applicaster/zapp-react-native-utils/reactHooks/resolvers";

import { riverLogger } from "./logger";
import { tvPluginsWithCellRenderer } from "../../const";
import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";

export type RiverItemType = {
  item: ZappUIComponent;
  index: number;
  isScreenWrappedInContainer: boolean;
  groupId: string | number;
  feed: ZappFeed;
  onLoadFinished: (index: number) => void;
  onLoadFailed: ({ error, index }: { error: Error; index: number }) => void;
  riverId: string;
  getStaticComponentFeed: GeneralContentScreenProps["getStaticComponentFeed"];
  readyToBeDisplayed?: boolean;
  isLast: boolean;
};

function getFeedUrl(feed: ZappFeed, index: number) {
  try {
    const feedUrl = R.path(["entry", index, "content", "src"], feed);

    return (R.contains || R.includes)("fetchData?", feedUrl) ? feedUrl : null;
  } catch (error) {
    return null;
  }
}

function RiverItemComponent(props: RiverItemType) {
  const {
    item,
    riverId,
    index,
    groupId,
    feed,
    isScreenWrappedInContainer,
    onLoadFinished,
    onLoadFailed,
    getStaticComponentFeed,
    readyToBeDisplayed,
    isLast,
  } = props;

  const feedUrl = getFeedUrl(feed, index);

  const Component = useComponentResolver(
    {
      componentType: item.component_type,
      decorators: applyDecorators,
    },
    []
  );

  let CellRenderer = useCellResolver({ component: item });

  if (tvPluginsWithCellRenderer.includes(item.component_type) && isTV()) {
    riverLogger.warning({
      message:
        "Cell Renderer is not created for this component type by RiverItem",
      data: { component_type: item.component_type },
      jsOnly: true,
    });

    CellRenderer = undefined;
  }

  React.useEffect(() => {
    riverLogger.log({
      message: "mounting component",
      data: { item, feedUrl, Component, CellRenderer },
      jsOnly: true,
    });

    if (!CellRenderer && item.component_type !== "group-qb") {
      riverLogger.warning({
        message: "Cell Renderer is null - will fallback to default cell",
        data: { item, CellRenderer },
        jsOnly: true,
      });
    }
  }, []);

  if (Component === null || typeof Component === "undefined") {
    riverLogger.warning({
      message: `Component ${item.component_type} is null - skipping rendering`,
    });

    onLoadFinished(index);

    return null;
  }

  return (
    <Component
      CellRenderer={CellRenderer}
      readyToBeDisplayed={readyToBeDisplayed}
      getStaticComponentFeed={getStaticComponentFeed}
      id={item.id}
      riverId={riverId}
      isScreenWrappedInContainer={isScreenWrappedInContainer}
      component={item}
      componentIndex={index}
      onLoadFailed={onLoadFailed}
      onLoadFinished={() => onLoadFinished(index)} // Keeping it here to don't break the plugins.
      groupId={groupId}
      feedUrl={feedUrl}
      isLast={isLast}
    />
  );
}

export const RiverItem = React.memo<RiverItemType>(
  RiverItemComponent,
  R.equals
);