super-app/App/Container/Navi-Insurance/screen/compare-plan-screen/ComparePlanScreen.tsx

import React, { useEffect } from "react";
import { ScrollView, Text, View } from "react-native";
import { CtaData, CtaType } from "../../../../common/interface";
import { ScreenData } from "../../../../common/interface/widgets/screenData/ScreenData";
import {
  BaseActionTypes,
  GenericActionPayload,
} from "../../../../common/actions/GenericAction";
import { ScreenActionTypes } from "../../../../common/screen/ScreenActionTypes";
import { Widget } from "../../../../common/interface/widgets/Widget";
import { ScreenState } from "../../../../common/screen/BaseScreen";
import BaseWidget from "../../../../../components/widgets/BaseWidget";
import { logToSentry } from "../../../../common/hooks/useSentryLogging";
import { NativeDeeplinkNavigatorModule } from "../../../../common/native-module/NativeModules";
import { useNavigation } from "@react-navigation/native";
import ComparePlanShimmerScreen from "./shimmer-screen/ComparePlanShimmerScreen";
import {
  CtaNavigator,
  extractCtaParameters,
} from "../../../../common/navigator/NavigationRouter";
import QuoteOfferErrorScreen from "../quote-offer-screen/error-screen/QuoteOfferErrorScreen";
import { COMPARE_PLAN_SCREEN, ConstantCta } from "../../../../common/constants";

const ComparePlanScreen = ({
  ctaData,
  screenData,
  handleActions,
}: {
  ctaData: CtaData;
  screenData: ScreenData | null;
  handleActions: (screenPayload?: GenericActionPayload) => void;
}) => {
  const navigation = useNavigation();
  const handleClick = (cta?: CtaData) => {
    if (!cta) {
      logToSentry(
        `Navigation cta is missing or invalid: ${cta} | MethodName: handleClick}`,
      );
      return;
    }

    const { navigatorType } = extractCtaParameters(cta);

    try {
      switch (cta.type) {
        case CtaType.DEEP_LINK:
        case CtaType.USE_ROOT_DEEPLINK_NAVIGATOR:
          NativeDeeplinkNavigatorModule.navigateToNaviInsuranceDeeplinkNavigator(
            JSON.stringify(cta),
          );
          break;
        case CtaType.RN_NAVIGATOR:
          CtaNavigator.performNavigation(navigation, navigatorType, cta);
          break;
        default:
          NativeDeeplinkNavigatorModule.navigateToNaviDeeplinkNavigator(
            JSON.stringify(cta),
          );
          break;
      }
    } catch (error) {
      logToSentry(
        `Error while navigating to deep link with CTA: ${cta} | MethodName: handleClick}`,
      );
    }
  };
  useEffect(() => {
    handleActions({
      baseActionType: BaseActionTypes.SCREEN_ACTION,
      metaData: [
        {
          actionType: ScreenActionTypes.FETCH_COMPARE_PLAN_LIST,
          data: ctaData?.data,
          screenName: COMPARE_PLAN_SCREEN
        },
      ],
    });
  }, [ctaData]);

  const Header = () => {
    return getWidgetViews(
      screenData?.screenWidgets?.headerWidgets,
      handleActions,
      screenData?.screenState,
      handleClick,
    );
  };

  const ContentWidgets = () => {
    return getWidgetViews(
      screenData?.screenWidgets?.contentWidgets,
      handleActions,
      screenData?.screenState,
      handleClick,
    );
  };

  if (screenData?.screenState === ScreenState.LOADING) {
    return <ComparePlanShimmerScreen handleClick={handleClick} />;
  }

  if (screenData?.screenState === ScreenState.ERROR) {
    return (
      <QuoteOfferErrorScreen
        errorMetaData={screenData.errorMetaData}
        handleActions={handleActions}
        handleClick={handleClick}
        headerProperties={{
          leftIconCta: ConstantCta.GO_BACK_CTA,
          leftIcon: "BACK_ARROW",
        }}
      />
    );
  }

  return (
    <View style={[screenData?.screenStyle]}>
      <Header />
      <ScrollView>
        <ContentWidgets />
      </ScrollView>
    </View>
  );
};

function getWidgetViews(
  widgetList: Widget[] | undefined,
  handleActions: (screenActionPayload?: GenericActionPayload) => void,
  screenState?: ScreenState | null,
  handleClick?: (ctaData: CtaData) => void,
): React.JSX.Element {
  return (
    <View>
      {widgetList?.map((widget, index) => {
        return (
          <BaseWidget
            widget={widget}
            handleScreenActions={handleActions}
            screenState={screenState}
            widgetIndex={index}
            key={index}
            handleClick={handleClick}
          />
        );
      })}
    </View>
  );
}

export default ComparePlanScreen;