import { Observer } from "mobx-react-lite";
import React, { createContext } from "react";
import { StatusBar } from "react-native";
import { gestureHandlerRootHOC } from "react-native-gesture-handler";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { DEFAULT_COLOR } from "./commons";
import { Dimensions, ModalPortal, View } from "./components";
import { tBaseStore } from "./store";

type TContextType = {
  theme: typeof DEFAULT_COLOR;
};

export const TContext = createContext<TContextType>({
  theme: DEFAULT_COLOR,
});

type TBaseProviderProps = {
  toast?: any;
  children?: any;
  colorApp?: string;
};

export const TBaseProvider = gestureHandlerRootHOC(
  (props: TBaseProviderProps) => {
    const { toast, children, colorApp } = props;

    return (
      <TContext.Provider
        value={{
          theme: {
            ...DEFAULT_COLOR,
            ...(colorApp ? { colorApp } : {}),
          },
        }}
      >
        <SafeAreaProvider>
          {/* status bar */}
          <Observer>
            {() => (
              <StatusBar
                animated
                translucent
                barStyle={tBaseStore.statusBar}
                backgroundColor={DEFAULT_COLOR.transparent}
              />
            )}
          </Observer>

          {/* dimensions */}
          <Dimensions />

          {/* children */}
          <View flex1>{children}</View>

          {/* modal */}
          <ModalPortal />

          {toast}
        </SafeAreaProvider>
      </TContext.Provider>
    );
  }
);