import {
  DarkTheme,
  DefaultTheme,
  ThemeProvider,
} from "@react-navigation/native";
import { useFonts } from "expo-font";
import { Stack } from "expo-router";
import "react-native-reanimated";

import { useColorScheme } from "@/hooks/useColorScheme";
import { Appearance, Dimensions, StatusBar, View } from "react-native";
import { QueryClientProvider } from "@tanstack/react-query";
import { theme , MyStatusBar } from "common-ui";
import queryClient from "@/utils/queryClient";
import Toast from "react-native-toast-message";
import { NotificationProvider } from "@/services/notif-service/notif-context";
import { Provider as PaperProvider } from "react-native-paper";
import { AuthProvider } from "@/src/contexts/AuthContext";
import { trpc, trpcClient } from "@/src/trpc-client";
import { SafeAreaView, SafeAreaProvider } from "react-native-safe-area-context";
import LocationTestWrapper from "@/components/LocationTestWrapper";
import HealthTestWrapper from "@/components/HealthTestWrapper";
import FirstUserWrapper from "@/components/FirstUserWrapper";
import UpdateChecker from "@/components/UpdateChecker";
import CentralStoreInitializer from "@/src/components/CentralStoreInitializer";
import { RefreshProvider } from "../../../packages/ui/src/lib/refresh-context";
import WebViewWrapper from "@/components/WebViewWrapper";
import BackHandlerWrapper from "@/components/BackHandler";
import AddToCartDialog from "@/src/components/AddToCartDialog";
import React from "react";
import NotifChecker from "@/services/notif-service/notif-checker";

export default function RootLayout() {
  const colorScheme = useColorScheme();
  const [loaded] = useFonts({
    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
  });

  console.log('from layout')
  
  React.useEffect(() => {
    Appearance.setColorScheme('light')
  }, []);

  if (!loaded) {
    return null;
  }

  return (
    <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
      <MyStatusBar />
      <SafeAreaProvider>
      <SafeAreaView
        edges={['bottom', 'left', 'right']}
        style={{ flex: 1, paddingTop: 0 }}
        testID="app-root"
      >

        <View style={{ flex: 1, backgroundColor: theme.colors.gray1 }}>
            <QueryClientProvider client={queryClient}>
              <trpc.Provider client={trpcClient} queryClient={queryClient}>
                <UpdateChecker>
                  <HealthTestWrapper>
                    <WebViewWrapper>
                      <FirstUserWrapper>
                        <AuthProvider>
                          <NotificationProvider>
                              <NotifChecker />
                              <PaperProvider>
                              <LocationTestWrapper>
                                <RefreshProvider queryClient={queryClient}>
                                <CentralStoreInitializer>
                                  <BackHandlerWrapper />
                                  <Stack screenOptions={{ headerShown: false }} />
                                  <AddToCartDialog />
                                </CentralStoreInitializer>
                              </RefreshProvider>
                              </LocationTestWrapper>
                            </PaperProvider>
                          </NotificationProvider>
                        </AuthProvider>
                      </FirstUserWrapper>
                    </WebViewWrapper>
                  </HealthTestWrapper>
                </UpdateChecker>
              </trpc.Provider>
            </QueryClientProvider>
        </View>
      </SafeAreaView>
      </SafeAreaProvider>
      <Toast />
    </ThemeProvider>
  );
}
