super-app/App/common/hooks/useBottomSheet.tsx

import { useState } from "react";
import { View } from "react-native";
import BaseBottomSheetComponent from "../../../components/bottomsheet/BaseBottomSheetComponent";
import { GenericActionPayload } from "../actions/GenericAction";
import { BOTTOMSHEET_ANIMATION_DURATION } from "../constants";
import { ModalView } from "../interface/modals/ModalView";
import { clearBottomSheet, setBottomSheetView } from "../utilities/AlfredUtils";

export const useBottomSheet = (
  handleActions: (actionPayload?: GenericActionPayload) => void,
) => {
  const [bottomsheet, setBottomSheet] = useState<JSX.Element[]>([]);

  const onAnimationEndHandler = (id: number | null) => {
    if (!id) return;
    setBottomSheetView(id);
  };

  const addBottomSheet = (modalView: ModalView) => {
    setBottomSheet(prevState => [
      ...prevState,
      <View>
        <BaseBottomSheetComponent
          onBottomSheetAnimationEnd={onAnimationEndHandler}
          showModal={true}
          onClose={() => removeBottomSheet()}
          modalView={modalView}
          handleActions={handleActions}
        />
      </View>,
    ]);
  };

  const removeBottomSheet = () => {
    clearBottomSheet();
    setBottomSheet(prevState => {
      const newState = [...prevState];
      newState.pop();
      return newState;
    });
  };

  const replaceBottomSheet = (modalView: ModalView) => {
    setTimeout(() => {
      removeBottomSheet();
    }, BOTTOMSHEET_DISMISS_ANIMATION_DURATION); // This delay ensures the first bottom sheet closes before the next one appears.
    setTimeout(() => {
      addBottomSheet(modalView);
    }, BOTTOMSHEET_ANIMATION_DURATION);
    // BOTTOMSHEET_ANIMATION_DURATION is for allowing the current bottomsheet to close animatically before opening the new one.
  };

  return { bottomsheet, addBottomSheet, removeBottomSheet, replaceBottomSheet };
};