super-app/components/widgets/HeaderWithAssetsWidget.tsx

import { useEffect } from "react";
import {
  BackHandler,
  Image,
  StyleSheet,
  TouchableOpacity,
  View,
  ViewStyle,
} from "react-native";
import { GenericActionPayload } from "../../App/common/actions/GenericAction";
import { HARDWARE_BACK_PRESS } from "../../App/common/constants";
import { CtaData } from "../../App/common/interface";
import { HeaderWithAssetsWidgetData } from "../../App/common/interface/widgets/widgetData/HeaderWithAssetsWidgetData";
import { StyledImage } from "../StyledImage";
import { StyledLottie } from "./styled-lottie/StyledLottie";
import { StyledText } from "./styled-text/StyledText";
import { useNavigation } from "@react-navigation/native";
import { useBackSwipeListener } from "../../App/common/hooks";

const navigation = useNavigation();
const HeaderWithAssetsWidget = ({
  widgetData,
  widgetStyle,
  handleActions,
  widgetIndex,
  handleClick,
}: {
  widgetData: HeaderWithAssetsWidgetData;
  widgetStyle: ViewStyle;
  handleActions: (
    value?: any | undefined | null,
    screenActionPayload?: GenericActionPayload,
  ) => void;
  widgetIndex: number;
  handleClick?: (ctaData: CtaData) => void;
}) => {
  const handleBackButtonClick = () => {
    handleActions(null, widgetData?.action);
    handleClick &&
      widgetData?.leftIcon?.cta &&
      handleClick(widgetData?.leftIcon?.cta);
    return true;
  };
  useBackSwipeListener(navigation, widgetData?.leftIcon?.cta, "");

  useEffect(() => {
    BackHandler.addEventListener(HARDWARE_BACK_PRESS, handleBackButtonClick);
    return () => {
      BackHandler.removeEventListener(
        HARDWARE_BACK_PRESS,
        handleBackButtonClick,
      );
    };
  }, [widgetData]);

  return (
    <View style={[styles.container, widgetStyle]}>
      {widgetData.leftIcon && (
        <TouchableOpacity onPress={() => handleBackButtonClick()}>
          <Image
            source={{ uri: widgetData.leftIcon?.url }}
            style={widgetData.leftIcon?.imageStyle}
          />
        </TouchableOpacity>
      )}
      {widgetData.leftLottie && (
        <StyledLottie
          lottieFieldData={widgetData?.leftLottie}
          handleClick={handleClick}
        />
      )}
      {widgetData.centerTitle && (
        <StyledText textFieldData={widgetData?.centerTitle} />
      )}
      {widgetData.rightIcon &&
        (widgetData.isRightAssetVisible === false ? false : true) && (
          <View>
            <StyledImage
              imageFieldData={widgetData?.rightIcon}
              handleClick={handleClick}
            />
          </View>
        )}
      {widgetData.rightLottie &&
        (widgetData.isRightAssetVisible === false ? false : true) && (
          <StyledLottie
            lottieFieldData={widgetData?.rightLottie}
            handleClick={handleClick}
          />
        )}
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    width: "100%",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    padding: 16,
  },
});
export default HeaderWithAssetsWidget;