super-app/components/widgets/card-with-list-items-widget/CardWithListItemsWidget.tsx

import { useState } from "react";
import { FlatList, TouchableOpacity, View, ViewStyle } from "react-native";
import { StyledImage, StyledText } from "..";
import { TimeoutConstants } from "../../../App/common/constants";
import {
  ButtonData,
  ButtonState,
  CardFooterCtaButtonProps,
  CardWithListItemsWidgetProps,
} from "../../../App/common/interface/widgets/widgetData";
import { ScreenState } from "../../../App/common/screen/BaseScreen";
import CtaButton from "../../reusable/cta-button/CtaButton";
import styles from "./CardWithListItemsWidgetStyles";

const CardFooterCtaButton = ({
  buttonState,
  buttonData,
  handleFooterButtonClick,
  style,
}: CardFooterCtaButtonProps) => {
  const combinedStyle: ViewStyle | undefined = style
    ? ([buttonData?.buttonStyle, style].filter(Boolean) as ViewStyle)
    : buttonData?.buttonStyle;

  return (
    <CtaButton
      state={buttonState}
      onPress={() => handleFooterButtonClick?.(buttonData)}
      style={combinedStyle}
    >
      {buttonData?.title && <StyledText textFieldData={buttonData.title} />}
    </CtaButton>
  );
};

const CardWithListItemsWidget = ({
  widgetData,
  handleActions,
  handleClick,
  screenState,
}: CardWithListItemsWidgetProps) => {
  const [loadingButtonId, setLoadingButtonId] = useState<string>();
  const handleFooterButtonClick = (buttonData?: ButtonData) => {
    if (!buttonData) return;

    const { buttonId, actions, cta } = buttonData;
    setLoadingButtonId(buttonId);

    if (actions && handleActions) {
      handleActions(null, actions);
    } else if (cta && handleClick) {
      handleClick(cta);
    }
    setTimeout(() => {
      setLoadingButtonId(undefined);
    }, TimeoutConstants.TIMEOUT_1000);
  };

  const handleCardClick = () => {
    const { cardCta } = widgetData || {};
    if (cardCta && handleClick) {
      handleClick(cardCta);
    }
  };
  const buttonState =
    loadingButtonId === widgetData?.rightFooter?.buttonId &&
    screenState === ScreenState.OVERLAY
      ? ButtonState.LOADING
      : ButtonState.ENABLED;

  const showLeftFooter =
    widgetData?.leftFooter?.title?.text && widgetData?.leftFooter?.cta;
  const showRightFooter = widgetData?.rightFooter?.title?.text;
  return (
    <TouchableOpacity onPress={handleCardClick} activeOpacity={1}>
      <View style={styles.columnContainer}>
        <View style={styles.tagContainer}>
          {widgetData?.tagTitle && (
            <StyledText
              textFieldData={widgetData.tagTitle}
              handleClick={handleClick}
              handleActions={handleActions}
            />
          )}
        </View>
        <View style={[styles.rowContainer, widgetData?.titleContainerStyle]}>
          {widgetData?.cardImage && (
            <StyledImage
              imageFieldData={widgetData.cardImage}
              handleActions={handleActions}
              handleClick={handleClick}
            />
          )}
          {widgetData?.leftTitle && (
            <StyledText
              textFieldData={widgetData.leftTitle}
              handleClick={handleClick}
              handleActions={handleActions}
            />
          )}
        </View>
        <FlatList
          contentContainerStyle={widgetData.listData?.listStyle}
          data={widgetData.listData?.items}
          renderItem={({ item }) => (
            <StyledText
              textFieldData={item}
              handleClick={handleClick}
              handleActions={handleActions}
            />
          )}
          keyExtractor={(item, index) =>
            item?.id || item?.text || index.toString()
          }
        />
        {(showLeftFooter || showRightFooter) && (
          <View style={styles.footerContainer}>
            {showLeftFooter && (
              <CardFooterCtaButton
                buttonData={widgetData?.leftFooter}
                handleFooterButtonClick={handleFooterButtonClick}
                style={
                  showRightFooter ? undefined : styles.singleFooterContainer
                }
              />
            )}
            {showRightFooter && (
              <CardFooterCtaButton
                buttonState={buttonState}
                buttonData={widgetData?.rightFooter}
                handleFooterButtonClick={handleFooterButtonClick}
                style={
                  showLeftFooter ? undefined : styles.singleFooterContainer
                }
              />
            )}
          </View>
        )}
      </View>
    </TouchableOpacity>
  );
};

export default CardWithListItemsWidget;