super-app/components/widgets/title-with-list-widget/TitleWithListWidget.tsx

import throttle from "lodash/throttle";
import { useCallback, useEffect } from "react";
import { FlatList, TouchableOpacity, View, ViewStyle } from "react-native";
import { StyledImage, StyledText, TitleWidget } from "..";
import { GenericActionPayload } from "../../../App/common/actions/GenericAction";
import { sendAsAnalyticsEvent } from "../../../App/common/hooks/useAnalyticsEvent";
import { CtaData } from "../../../App/common/interface";
import {
  ImageFieldData,
  ListItem,
  TitleWithListWidgetDataProps,
} from "../../../App/common/interface/widgets/widgetData";
import { ItemSeparator } from "../../reusable";
import Tooltip from "../../reusable/tooltip/Tooltip";
import styles from "./TitleWithListWidgetStyle";

const OverlappedImageComponent = ({
  overlappedImageData,
}: {
  overlappedImageData: ImageFieldData[];
}) => {
  return (
    <View style={styles.overlappedImageContainer}>
      {overlappedImageData?.map(imageData => (
        <StyledImage imageFieldData={imageData} />
      ))}
    </View>
  );
};

const ListItemComponent = ({
  item,
  handleActions,
  handleWidgetClick,
  handleClick,
}: {
  item: ListItem;
  handleActions: (
    value: any | undefined | null,
    actionPayloadList: GenericActionPayload | undefined,
  ) => void;
  handleWidgetClick: (item: ListItem) => void;
  handleClick?: (cta: CtaData) => void;
}) => {
  useEffect(() => {
    item.onViewEvent && sendAsAnalyticsEvent(item.onViewEvent);
  });
  const containerStyle: ViewStyle = {
    ...(item.overlappedImageData?.length ? styles.containerStyles : {}),
  };
  const itemRowContainerStyle: ViewStyle = {
    ...styles.itemRowContainer,
    ...(item.overlappedImageData &&
      item?.overlappedImageData?.length > 0 &&
      styles.itemRowContainerStyles),
  };
  return (
    <TouchableOpacity
      onPress={() => handleWidgetClick(item)}
      activeOpacity={1}
      disabled={!(item?.cta || item?.actions)}
    >
      <View style={containerStyle}>
        {item.overlappedImageData && item.overlappedImageData.length > 0 && (
          <OverlappedImageComponent
            overlappedImageData={item.overlappedImageData}
          />
        )}

        <TitleWidget
          widgetData={item}
          widgetStyle={itemRowContainerStyle}
          handleActions={handleActions}
          handleClick={handleClick}
          widgetIndex={Number(item.id)}
        />
        {item?.rightIcon && (
          <View style={styles.rightIconContainer}>
            <StyledImage
              imageFieldData={item?.rightIcon}
              handleActions={handleActions}
              handleClick={handleClick}
            ></StyledImage>
          </View>
        )}
      </View>
    </TouchableOpacity>
  );
};

const ListFooterItemComponent = ({
  item,
  handleClick,
}: {
  item: ListItem;
  handleClick?: (cta: CtaData) => void;
}) => {
  return (
    <TitleWidget
      widgetData={item}
      widgetStyle={{ ...styles.listFooterContainer, ...item.itemStyle }}
      handleClick={handleClick}
    />
  );
};

const TitleWithListWidget = ({
  widgetData,
  widgetStyle,
  handleActions,
  handleClick,
  widgetIndex,
}: TitleWithListWidgetDataProps) => {
  const throttledHandleActions = useCallback(
    throttle(handleActions, 700, { leading: true, trailing: false }),
    [],
  );
  const handleWidgetClick = (item: ListItem) => {
    if (item?.actions) {
      handleActions(null, item?.actions);
    } else if (item?.cta && handleClick) {
      handleClick(item?.cta);
    }
  };

  const throttledHandleWidgetClick = useCallback(
    throttle(handleWidgetClick, 700, { leading: true, trailing: false }),
    [],
  );
  return (
    <View>
      <TitleWidget
        widgetData={widgetData}
        widgetStyle={styles.rowContainer}
        handleActions={throttledHandleActions}
        handleClick={handleClick}
        widgetIndex={widgetIndex}
      />
      <View
        style={[
          widgetData.listStyle ? widgetData.listStyle : styles.listContainer,
        ]}
      >
        <FlatList
          data={widgetData.listData}
          renderItem={({ item }: { item: ListItem }) => (
            <ListItemComponent
              item={item}
              handleActions={throttledHandleActions}
              handleWidgetClick={throttledHandleWidgetClick}
              handleClick={handleClick}
            />
          )}
          keyExtractor={(item, index) => item.id || index.toString()}
          ItemSeparatorComponent={() => (
            <ItemSeparator separatorData={widgetData.separatorData!!} />
          )}
        />
        {widgetData.listFooter?.title?.text && (
          <ListFooterItemComponent
            item={widgetData.listFooter}
            handleClick={handleClick}
          />
        )}
      </View>
      {widgetData.tooltip?.title && (
        <Tooltip tooltipStyle={widgetData.tooltip.style}>
          <StyledText textFieldData={widgetData.tooltip.title} />
        </Tooltip>
      )}
    </View>
  );
};

export default TitleWithListWidget;