super-app/components/bottomsheet/top-section-expandable-bottom-sheet/TopSectionExpandableBottomSheet.tsx

import React, { useState } from "react";
import {
  FlatList,
  LayoutAnimation,
  NativeScrollEvent,
  NativeSyntheticEvent,
  Platform,
  ScrollView,
  TouchableOpacity,
  View,
} from "react-native";
import Animated, {
  useAnimatedStyle,
  useDerivedValue,
  useSharedValue,
} from "react-native-reanimated";
import { commonStyles } from "../../../App/Container/Navi-Insurance/Styles";
import {
  INITIAL_Y_VALUE,
  OsTypeConstants,
} from "../../../App/common/constants";
import { sendAsAnalyticsEvent } from "../../../App/common/hooks/useAnalyticsEvent";
import { NaviLinearGradient } from "../../../App/common/hooks/useGradient";
import {
  DropdownContent,
  DropdownData,
  TitleSubtitleWithDropdownBottomSheetProps,
} from "../../../App/common/interface/widgets/modalData";
import { TextFieldData } from "../../../App/common/interface/widgets/widgetData";
import { StyledImage } from "../../StyledImage";
import { StyledText } from "../../widgets/styled-text/StyledText";
import styles from "./TopSectionExpandableBottomSheetStyle";

const TopSectionExpandableBottomSheet = ({
  bottomSheetData,
  handleModalClick,
  handleActions,
}: TitleSubtitleWithDropdownBottomSheetProps) => {
  const y = useSharedValue(INITIAL_Y_VALUE);
  const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
    y.value = event.nativeEvent.contentOffset.y;
  };
  const derivedY = useDerivedValue(() => {
    return y.value;
  });

  const handleRightTitleClick = () => {
    handleModalClick && handleModalClick(bottomSheetData?.rightTitle?.cta!!);
  };

  const headerIconClick = () => {
    handleModalClick &&
      bottomSheetData?.headerDescriptionText?.cta &&
      handleModalClick(bottomSheetData?.headerDescriptionText?.cta);
  };

  const headerStyle = useAnimatedStyle(() => {
    return {
      shadowColor: derivedY.value > 0 ? "black" : "transparent",
      shadowOpacity: derivedY.value > 0 ? 1 : 0,
      shadowRadius: derivedY.value > 0 ? 8 : 0,
      elevation: derivedY.value > 0 ? 32 : 0,
    };
  });

  const subtitle = {
    ...bottomSheetData.subtitle,
    textStyle: {
      ...bottomSheetData.subtitle?.textStyle,
      textAlign: "left",
    },
  } as TextFieldData;

  const Header = () => {
    return (
      <Animated.View style={[styles.title, headerStyle]}>
        {bottomSheetData?.title?.text && (
          <StyledText textFieldData={bottomSheetData.title} />
        )}
        {bottomSheetData?.rightTitle && (
          <TouchableOpacity activeOpacity={1} onPress={handleRightTitleClick}>
            <StyledText textFieldData={bottomSheetData.rightTitle} />
          </TouchableOpacity>
        )}
      </Animated.View>
    );
  };
  return (
    <View style={bottomSheetData?.viewStyle}>
      <ScrollView
        nestedScrollEnabled={true}
        showsVerticalScrollIndicator={false}
        bounces={false}
        scrollEnabled={true}
        overScrollMode={"never"}
        stickyHeaderIndices={[0]}
        onScroll={onScroll}
      >
        <Header />
        <TouchableOpacity activeOpacity={1}>
          <NaviLinearGradient
            gradientColors={bottomSheetData?.backgroundGradient}
            orientation={bottomSheetData?.gradientOrientation}
          >
            {bottomSheetData?.subtitle?.text && (
              <StyledText textFieldData={subtitle} />
            )}
            {bottomSheetData?.headerDescriptionText &&
              !(bottomSheetData?.showDescriptionIcon == false) && (
                <View style={styles.videoContainer}>
                  <TouchableOpacity activeOpacity={1} onPress={headerIconClick}>
                    <StyledText
                      textFieldData={bottomSheetData.headerDescriptionText}
                    />
                  </TouchableOpacity>
                  <View style={styles.descriptionIcon}>
                    {bottomSheetData?.headerDescriptionIcon && (
                      <StyledImage
                        imageFieldData={bottomSheetData.headerDescriptionIcon}
                        handleClick={handleModalClick}
                      />
                    )}
                  </View>
                </View>
              )}
            {!bottomSheetData?.headerDescriptionText && (
              <View style={commonStyles.height8}></View>
            )}
          </NaviLinearGradient>
          {bottomSheetData?.dropdownData?.title?.text && (
            <DropDownComponent dropdownData={bottomSheetData?.dropdownData} />
          )}
        </TouchableOpacity>
      </ScrollView>
    </View>
  );
};

const DropDownComponent = ({
  dropdownData,
}: {
  dropdownData: DropdownData;
}) => {
  const [isExpanded, setIsExpanded] = useState<boolean>(false);
  const toggleOpen = () => {
    if (Platform.OS === OsTypeConstants.ANDROID) {
      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    }
    setIsExpanded(value => !value);
    dropdownData?.toggleEvent &&
      sendAsAnalyticsEvent(dropdownData?.toggleEvent);
  };

  const BulletPoint = ({ item }: { item: DropdownContent }) => {
    return (
      <View>
        {item?.icon?.url ? (
          <StyledImage imageFieldData={item.icon} />
        ) : (
          <View style={styles.bulletIcon}></View>
        )}
      </View>
    );
  };

  const DropdownItemComponent = ({ item }: { item: DropdownContent }) => {
    return (
      <View style={styles.rowContainer}>
        <BulletPoint item={item} />
        {item?.content?.text && <StyledText textFieldData={item.content} />}
      </View>
    );
  };

  const CollapsableText = (collapsableText?: TextFieldData) => {
    return (
      <View>
        {collapsableText?.text && (
          <StyledText textFieldData={collapsableText} />
        )}
      </View>
    );
  };

  return (
    <View style={[styles.contentSection, dropdownData?.style]}>
      <TouchableOpacity
        disabled={isExpanded}
        onPress={!isExpanded ? toggleOpen : undefined}
        activeOpacity={1}
        style={commonStyles.flexStart}
      >
        {dropdownData?.title?.text && (
          <StyledText textFieldData={dropdownData.title} />
        )}
        {dropdownData?.contentList?.[0] && (
          <DropdownItemComponent
            item={{
              ...dropdownData.contentList[0],
              content: {
                ...(dropdownData.contentList[0]?.content as TextFieldData),
                numberOfLines: isExpanded ? 10 : 1,
              },
            }}
          />
        )}
        {dropdownData?.contentList?.[1] && (
          <DropdownItemComponent
            item={{
              ...dropdownData.contentList[1],
              content: {
                ...(dropdownData.contentList[1]?.content as TextFieldData),
                numberOfLines: isExpanded ? 10 : 1,
              },
            }}
          />
        )}
      </TouchableOpacity>
      {isExpanded && dropdownData?.contentList && (
        <FlatList
          data={dropdownData?.contentList?.slice(2)}
          renderItem={({ item }) => <DropdownItemComponent item={item} />}
        />
      )}
      <TouchableOpacity
        onPress={toggleOpen}
        activeOpacity={1}
        style={styles.expandText}
      >
        {isExpanded
          ? CollapsableText(dropdownData?.collapseText)
          : CollapsableText(dropdownData?.expandText)}
      </TouchableOpacity>
    </View>
  );
};

export default TopSectionExpandableBottomSheet;