super-app/components/widgets/expandable-list-widget/ExpandableListWidget.tsx

import { useCallback, useState } from "react";
import {
  FlatList,
  LayoutAnimation,
  TouchableOpacity,
  View,
} from "react-native";
import { StyledImage, StyledText } from "..";
import {
  BENEFIT_SECTION_ANIMATION_DURATION,
  THROTTLE_DURATION,
} from "../../../App/common/constants";
import { sendAsAnalyticsEvent } from "../../../App/common/hooks/useAnalyticsEvent";
import { TitleWithAssetsWidgetData } from "../../../App/common/interface/widgets/widgetData";
import { ExpandableListWidgetProps } from "../../../App/common/interface/widgets/widgetData/ExpandableListWidgetData";
import { NaviAnimationConfig } from "../../../App/common/utilities/AnimationUtils";
import { createThrottledHandler } from "../../../App/common/utilities/ThrottleUtil";
import { StyledLottie } from "../styled-lottie/StyledLottie";
import styles from "./ExpandableListWidgetStyles";

const ExpandableListWidget = ({
  widgetData,
  widgetStyle,
  handleActions,
  handleClick,
  widgetIndex,
}: ExpandableListWidgetProps) => {
  const [isExpanded, setIsExpanded] = useState<boolean>(false);
  const toggleOpen = () => {
    LayoutAnimation.configureNext(
      NaviAnimationConfig({ duration: BENEFIT_SECTION_ANIMATION_DURATION }),
    );
    if (!isExpanded) {
      widgetData?.toggleEvent && sendAsAnalyticsEvent(widgetData.toggleEvent);
    }
    setIsExpanded(value => !value);
  };
  const throttledHandleActions = useCallback(
    createThrottledHandler(
      action => handleActions(null, action),
      THROTTLE_DURATION,
    ),
    [widgetData],
  );
  const dataToShow = isExpanded
    ? widgetData.listItems
    : widgetData?.listItems?.slice(0, 2);
  return (
    <View style={styles.container}>
      <View style={styles.sectionHeader}>
        {widgetData?.sectionTitle && (
          <StyledText textFieldData={widgetData.sectionTitle} />
        )}
      </View>

      <FlatList
        data={dataToShow}
        renderItem={({ item }: { item: TitleWithAssetsWidgetData }) => (
          <TouchableOpacity
            onPress={() => {
              const { cta, actions } = item || {};
              if (actions) {
                throttledHandleActions(actions);
              } else if (cta && handleClick) {
                handleClick(cta);
              }
            }}
            activeOpacity={1}
          >
            <View style={styles.listContainer}>
              <View style={styles.rowContainer}>
                {item?.leftIcon && (
                  <StyledImage imageFieldData={item?.leftIcon} />
                )}
                {item?.leftLottie && (
                  <StyledLottie lottieFieldData={item?.leftLottie} />
                )}
                <View style={styles.titleContainer}>
                  {item?.title && <StyledText textFieldData={item?.title} />}
                  {item?.subtitle && (
                    <StyledText textFieldData={item?.subtitle} />
                  )}
                </View>
              </View>
              {item?.rightIcon && (
                <StyledImage imageFieldData={item?.rightIcon} />
              )}
              {item?.rightLottie && (
                <StyledLottie lottieFieldData={item?.rightLottie} />
              )}
            </View>
          </TouchableOpacity>
        )}
        keyExtractor={(item, index) => item?.id || index.toString()}
        ItemSeparatorComponent={() => <View style={styles.separator} />}
        contentContainerStyle={widgetData?.listStyle}
      />
      {widgetData?.listItems && widgetData?.listItems?.length > 2 && (
        <TouchableOpacity
          onPress={toggleOpen}
          activeOpacity={1}
          style={styles.expandText}
        >
          {isExpanded
            ? widgetData?.collapseText && (
                <StyledText textFieldData={widgetData?.collapseText} />
              )
            : widgetData?.expandText && (
                <StyledText textFieldData={widgetData?.expandText} />
              )}
        </TouchableOpacity>
      )}
    </View>
  );
};
export default ExpandableListWidget;