super-app/components/widgets/title-with-horizontal-carousel-list-widget/TitleWithHorizontalCarouselListWidget.tsx

import React, { useEffect, useRef, useState } from "react";
import { FlatList, TouchableOpacity, View } from "react-native";
import { StyledText } from "..";
import { SCREEN_MID } from "../../../App/common/constants";
import { sendAsAnalyticsEvent } from "../../../App/common/hooks/useAnalyticsEvent";
import { AnalyticsEvent } from "../../../App/common/interface";
import {
  CarouselListData,
  ListItem,
  TitleWithHorizontalCarouselListWidgetProps,
} from "../../../App/common/interface/widgets/widgetData";
import { ItemSeparator } from "../../reusable";
import styles from "./TitleWithHorizontalCarouselListWidgetStyle";

const TitleWithHorizontalCarouselListWidget = ({
  widgetData,
  widgetStyle,
  handleActions,
  handleClick,
  widgetIndex,
}: TitleWithHorizontalCarouselListWidgetProps) => {
  const [selectedItem, setSelectedItem] = useState<number | string | undefined>(
    widgetData?.selectedItem,
  );
  const flatListRef = useRef<FlatList>(null);
  const { name, properties } =
    widgetData?.widgetMetaData?.analyticsEventProperties || {};

  const handleSelectItem = (item: CarouselListData) => {
    setSelectedItem(item?.id);
    handleActions(
      item?.dependentWidgets,
      widgetData?.widgetMetaData?.onValueChangeAction,
    );
    if (name) {
      const clickEvent: AnalyticsEvent = {
        name: name,
        properties: {
          ...properties,
          sumInsured: item?.id?.toString(),
        },
      };
      sendAsAnalyticsEvent(clickEvent);
    }
  };

  const renderListItem = ({ item }: { item: ListItem }) => (
    <View style={styles.listItem}>
      {item?.title && <StyledText textFieldData={item?.title} />}
      {item?.rightTitle && <StyledText textFieldData={item?.rightTitle} />}
    </View>
  );
  const CarouselItem = ({ item }: { item: CarouselListData }) => {
    const isSelected = selectedItem === item?.id;
    const containerStyles = [
      widgetData?.defaultItemContainerStyles,
      isSelected && widgetData?.selectedItemContainerStyles,
    ];
    const listData = isSelected
      ? item?.selectedState?.listData
      : item?.unSelectedState?.listData;
    return (
      <TouchableOpacity
        style={containerStyles}
        onPress={() => handleSelectItem(item)}
        activeOpacity={1}
      >
        <View
          style={[
            widgetData?.titleContainerStyles,
            isSelected && widgetData?.selectedTitleContainerStyles,
          ]}
        >
          <StyledText
            textFieldData={
              isSelected
                ? item?.selectedState?.title
                : item?.unSelectedState?.title
            }
          />
        </View>
        {!isSelected && widgetData?.separatorData && (
          <ItemSeparator separatorData={widgetData?.separatorData} />
        )}

        {listData && (
          <View style={styles.listContainer}>
            {listData?.map(listItem => renderListItem({ item: listItem }))}
          </View>
        )}
      </TouchableOpacity>
    );
  };
  const index = widgetData.carouselListData?.findIndex(
    item => item.id === selectedItem,
  );

  useEffect(() => {
    if (index !== undefined && index !== -1) {
      flatListRef.current?.scrollToIndex({
        index,
        animated: false,
        viewPosition: SCREEN_MID,
      });
    }
  }, []);

  return (
    <View style={[widgetData.containerStyles]}>
      <FlatList
        ref={flatListRef}
        horizontal
        onScrollToIndexFailed={info => {
          const wait = new Promise(resolve => setTimeout(resolve, 0));
          wait.then(() => {
            flatListRef.current?.scrollToIndex({
              index: info.index,
              animated: true,
              viewPosition: SCREEN_MID,
            });
          });
        }}
        data={widgetData.carouselListData}
        renderItem={({ item }) => <CarouselItem item={item} />}
        keyExtractor={item => item?.id.toString()}
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={[
          styles.flatListContainer,
          widgetData?.flatListContainerStyles,
        ]}
        overScrollMode={"never"}
      />
    </View>
  );
};

export default TitleWithHorizontalCarouselListWidget;