super-app/components/widgets/styled-text/StyledText.tsx

import React from "react";
import { TouchableOpacity, View } from "react-native";
import Animated from "react-native-reanimated";
import { GenericActionPayload } from "../../../App/common/actions/GenericAction";
import { CtaData } from "../../../App/common/interface";
import {
  ImageFieldData,
  LottieFieldData,
  SubstringStyle,
  TextFieldData,
} from "../../../App/common/interface/widgets/widgetData/TitleWidgetData";
import { StyledImage } from "../../StyledImage";
import { StyledLottie } from "../styled-lottie/StyledLottie";
import styles from "./StyledTextComponentStyle";

export const StyledText = ({
  textFieldData,
  handleClick,
  handleActions,
}: {
  textFieldData: TextFieldData;
  handleClick?: (ctaData: CtaData) => void;
  handleActions?: (
    value: any | undefined | null,
    actionPayloadList: GenericActionPayload | undefined,
  ) => void;
}) => {
  let text: string = textFieldData.text;
  let topImage: ImageFieldData | undefined =
    textFieldData?.textDrawableData?.top;
  let bottomImage: ImageFieldData | undefined =
    textFieldData?.textDrawableData?.bottom;
  let leftImage: ImageFieldData | undefined =
    textFieldData?.textDrawableData?.left;
  let rightImage: ImageFieldData | undefined =
    textFieldData?.textDrawableData?.right;

  let topLottie: LottieFieldData | undefined =
    textFieldData?.textDrawableData?.topLottie;
  let bottomLottie: LottieFieldData | undefined =
    textFieldData?.textDrawableData?.bottomLottie;
  let leftLottie: LottieFieldData | undefined =
    textFieldData?.textDrawableData?.leftLottie;
  let rightLottie: LottieFieldData | undefined =
    textFieldData?.textDrawableData?.rightLottie;

  return (
    <View style={[styles.columnContainer, textFieldData.viewStyle]}>
      {topImage && (
        <StyledImage
          imageFieldData={topImage}
          handleClick={handleClick}
          handleActions={handleActions}
        />
      )}
      {topLottie && (
        <StyledLottie
          lottieFieldData={topLottie}
          handleClick={handleClick}
          handleActions={handleActions}
        />
      )}
      <View style={styles.rowContainer}>
        {leftImage && (
          <StyledImage
            imageFieldData={leftImage}
            handleClick={handleClick}
            handleActions={handleActions}
          />
        )}
        {leftLottie && (
          <StyledLottie
            lottieFieldData={leftLottie}
            handleClick={handleClick}
            handleActions={handleActions}
          />
        )}
        {text && (
          <StyledTextComponent
            textFieldData={textFieldData}
            handleClick={handleClick}
            handleActions={handleActions}
          />
        )}
        {rightImage && (
          <StyledImage
            imageFieldData={rightImage}
            handleClick={handleClick}
            handleActions={handleActions}
          />
        )}
        {rightLottie && (
          <StyledLottie
            lottieFieldData={rightLottie}
            handleClick={handleClick}
            handleActions={handleActions}
          />
        )}
      </View>
      {bottomImage && (
        <StyledImage
          imageFieldData={bottomImage}
          handleClick={handleClick}
          handleActions={handleActions}
        />
      )}
      {bottomLottie && (
        <StyledLottie
          lottieFieldData={bottomLottie}
          handleClick={handleClick}
          handleActions={handleActions}
        />
      )}
    </View>
  );
};

const StyledTextComponent = ({
  textFieldData,
  handleClick,
  handleActions,
}: {
  textFieldData: TextFieldData;
  handleClick?: (ctaData: CtaData) => void;
  handleActions?: (
    value: any | undefined | null,
    actionPayloadList: GenericActionPayload | undefined,
  ) => void;
}) => {
  const { cta, actions } = textFieldData;

  const handleTextClick = () => {
    if (actions && handleActions) {
      handleActions(null, actions);
    } else if (cta && handleClick) {
      handleClick(cta);
    }
  };

  const isInteractive = (cta && handleClick) || (actions && handleActions);

  return isInteractive ? (
    <TouchableOpacity onPress={handleTextClick} activeOpacity={1}>
      <TextComponent textFieldData={textFieldData} />
    </TouchableOpacity>
  ) : (
    <TextComponent textFieldData={textFieldData} />
  );
};

const TextComponent = ({ textFieldData }: { textFieldData: TextFieldData }) => {
  let substringStyleMap: SubstringStyle[] = [];
  let textFieldString: string = textFieldData.text || "";

  textFieldData.substringStyles?.forEach(({ substring, textStyle }, index) => {
    textFieldString = substringStyleMap?.pop()?.substring || textFieldData.text;
    if (substring) {
      const splitArray = textFieldString.split(substring);
      const part1: SubstringStyle = {
        substring: splitArray[0] || "",
      };
      const part2: SubstringStyle = {
        substring: substring,
        textStyle: textStyle,
      };
      const part3: SubstringStyle = {
        substring: splitArray[1] || "",
      };
      substringStyleMap = [...substringStyleMap, part1, part2, part3];
    } else {
      const part1: SubstringStyle = {
        substring: textFieldString,
      };
      substringStyleMap = [...substringStyleMap, part1];
    }
  });

  return (
    <Animated.Text
      ellipsizeMode={textFieldData.ellipsizeMode}
      numberOfLines={textFieldData.numberOfLines}
      style={textFieldData.textStyle || undefined}
    >
      {substringStyleMap.length !== 0
        ? substringStyleMap.map((substringStyle, index) => {
            return (
              <Animated.Text
                style={substringStyle.textStyle || undefined}
                key={index}
              >
                {substringStyle.substring}
              </Animated.Text>
            );
          })
        : textFieldData.text}
    </Animated.Text>
  );
};