import React from "react";
import { ActionSheetProvider } from "@expo/react-native-action-sheet";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";

import UserDataProvider from "./UserDataProvider";
import WebViewProvider from "./WebViewProvider";
import SplashAnimationProvider from "./SplashAnimationProvider";
import UniversalLinkProvider from "./UniversalLinkProvider";
import StripeEmbeddedProvider from "./StripeEmbeddedProvider";
import { SheetProvider } from "react-native-actions-sheet";

const SharedProviders = ({ children }) => {
  const providers = [
    [SafeAreaProvider, {}],
    [ActionSheetProvider, {}],
    [SplashAnimationProvider, {}],
    [WebViewProvider, {}],
    [UserDataProvider, {}],
    [StripeEmbeddedProvider, {}],
    [UniversalLinkProvider, {}],
    [BottomSheetModalProvider, {}],
    [SheetProvider, {}],
  ];

  // Dynamically nest the providers using reduce
  const Combined = providers.reduceRight(
    (AccumulatedChildren, [Provider, props]) => {
      return ({ children }) => (
        <Provider {...props}>
          <AccumulatedChildren>{children}</AccumulatedChildren>
        </Provider>
      );
    },
    ({ children }) => <>{children}</>
  );

  return <Combined>{children}</Combined>;
};

export default SharedProviders;