super-app/components/widgets/select-card-with-footer-widget/SelectCardWithFooterWidget.tsx

import { useEffect, useState } from "react";
import { View } from "react-native";
import { sendAsAnalyticsEvent } from "../../../App/common/hooks/useAnalyticsEvent";
import {
  Item,
  SelectCardWithFooterWidgetProps,
} from "../../../App/common/interface/widgets/widgetData";
import AccordionComponent from "./accordion-component/AccordionComponent";
import SelectionCardItem from "./SelectionCardItem";

const SelectCardWithFooterWidget = ({
  widgetData,
  widgetStyle,
  handleActions,
  handleClick,
  widgetIndex,
}: SelectCardWithFooterWidgetProps) => {
  const [selectedItem, setSelectedItem] = useState<string | undefined>(
    widgetData?.widgetMetaData?.selectedItem,
  );
  const [numItems, setNumItems] = useState<number | undefined>(
    widgetData?.visibleItems != null && widgetData?.visibleItems != undefined
      ? widgetData.visibleItems
      : widgetData?.items?.length,
  );

  const [isAccordionVisible, setIsAccordionVisible] = useState<boolean>(true);

  const handleSelect = (itemType?: string) => {
    setSelectedItem(itemType);
    const item = widgetData?.items?.find(item => item?.itemType === itemType);

    item?.analyticEvents?.onSelectedEvent &&
      sendAsAnalyticsEvent(item?.analyticEvents?.onSelectedEvent);

    if (item?.dependentWidgets) {
      handleActions(
        item.dependentWidgets,
        widgetData?.widgetMetaData?.onValueChangeAction,
      );
    }
  };

  return (
    <View>
      {widgetData?.items
        ?.slice(0, numItems)
        .map((item: Item) => (
          <SelectionCardItem
            key={item?.itemType}
            handleActions={handleActions}
            handleClick={handleClick}
            item={item}
            selected={selectedItem === item?.itemType}
            onSelect={() => handleSelect(item?.itemType)}
          />
        ))}
      {isAccordionVisible && widgetData?.accordionData && (
        <AccordionComponent
          handleActions={handleActions}
          handleClick={handleClick}
          widgetData={widgetData}
          setNumItems={setNumItems}
          setIsAccordionVisible={setIsAccordionVisible}
        />
      )}
    </View>
  );
};

export default SelectCardWithFooterWidget;