/// <reference types="@applicaster/applicaster-types" />

import * as React from "react";
import { Text } from "react-native";
import * as R from "ramda";

import {
  useFeedLoader,
  useLayoutVersion,
} from "@applicaster/zapp-react-native-utils/reactHooks";
import { GeneralContentScreen } from "../../GeneralContentScreen";
import { ScreenResolver } from "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver";
import { utilsLogger } from "@applicaster/zapp-react-native-utils/logger";
import {
  useNavbarState,
  useSetNavbarState,
} from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks/state";

type Props = {
  screenId: string;
  screenData: ZappRiver | ZappEntry;
  feedUrl?: string;
  extraProps?: any;
  screenResolverExtraProps?: any;
  componentsMapExtraProps?: any;
  isInsideContainer?: boolean;
  extraAnchorPointYOffset: number;
  extraOffset: number;
  river?: ZappRiver | ZappEntry;
};

export const River = (props: Props) => {
  const {
    screenId,
    feedUrl,
    extraProps,
    screenResolverExtraProps,
    componentsMapExtraProps,
    isInsideContainer,
    extraAnchorPointYOffset,
    extraOffset,
  } = props;

  const { title: screenTitle, summary: screenSummary } = useNavbarState();

  const { setTitle: setScreenTitle, setSummary: setScreenSummary } =
    useSetNavbarState();

  const rivers = useRivers();
  const isV2 = useLayoutVersion({ isV2: true });

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

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

  const connectedScreenUrl = React.useMemo(() => {
    // Avoid using feedUrl or content.src on layouts v2
    if (isV2) return null;

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

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

  const stringOrEmpty = (value: string | number | undefined): string =>
    R.isNil(value) ? "" : String(value);

  React.useEffect(() => {
    if (!isInsideContainer) {
      setScreenTitle(stringOrEmpty(screenData?.title));
      setScreenSummary(stringOrEmpty(screenData?.summary));
    }
  }, [screenData.id]);

  React.useEffect(() => {
    if (feedData && !isInsideContainer) {
      if (feedData.title && feedData.title !== screenTitle) {
        setScreenTitle(stringOrEmpty(feedData.title));
      }

      if (feedData.summary && feedData.summary !== screenSummary) {
        setScreenSummary(stringOrEmpty(feedData.summary));
      }
    } else {
      setScreenTitle(stringOrEmpty(screenData?.title));
      setScreenSummary(stringOrEmpty(screenData?.summary));
    }
  }, [feedData, screenData, screenTitle, screenSummary]);

  if (!river) {
    utilsLogger.error({
      message: `River ${screenData.id} not found!`,
      data: { screenData, feedData },
    });

    return <Text>`River ${screenData?.id} not found!`</Text>;
  }

  if (river.type !== "general_content") {
    const extraData = { ...R.mergeRight(extraProps, screenResolverExtraProps) };

    return (
      <ScreenResolver
        screenType={river.type}
        screenId={screenId}
        screenData={R.merge(river, { groupId: extraData?.groupId })}
        componentsMapExtraProps={componentsMapExtraProps}
        {...extraData}
      />
    );
  }

  return (
    <GeneralContentScreen
      feed={feedData}
      screenId={screenId}
      extraOffset={extraOffset}
      isScreenWrappedInContainer={isInsideContainer}
      extraAnchorPointYOffset={extraAnchorPointYOffset}
      componentsMapExtraProps={componentsMapExtraProps}
    />
  );
};