import "react-native-gesture-handler";
import { StatusBar } from "expo-status-bar";
import { Text, View } from "react-native";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";
import SideBar from "./src/Components/SideBar";
import {
  AppContext,
  AppProvider,
  Constants,
  GetDataFromList,
  GetMultipleData,
} from "./src/utils";
import { Suspense, lazy, useContext, useEffect } from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import "./i18n";
import DeviceScreen from "./src/Screens/Device";

const SettingsScreen = lazy(() => import("./src/Screens/Settings"));
const FaqScreen = lazy(() => import("./src/Screens/FAQ"));
const FeedbackScreen = lazy(() => import("./src/Screens/Feedback"));

const Drawer = createDrawerNavigator();

export function MyApp() {
  const appContext = useContext(AppContext);

  useEffect(() => {
    const loadData = async () => {
      const data = await GetMultipleData([
        "appLanguage",
        "appColorScheme",
        "userExpertMode",
        "userDeveloperMode",
      ]);

      const appLanguage = GetDataFromList(data, "appLanguage");
      const appColorScheme = GetDataFromList(data, "appColorScheme");
      const userExpertMode = GetDataFromList(data, "userExpertMode");
      const userDeveloperMode = GetDataFromList(data, "userDeveloperMode");

      appContext.setAppLanguage(
        appLanguage === null ? Constants.defaultLanguage : appLanguage
      );
      appContext.setAppColorScheme(
        appColorScheme === null ? "auto" : appColorScheme
      );

      appContext.setIsUserExpertModeEnabled(
        userExpertMode == null ? false : userExpertMode
      );

      appContext.setUserIsDeveloperModeEnabled(
        userDeveloperMode == null ? false : userDeveloperMode
      );
    };

    loadData();
  }, []);

  return (
    <SafeAreaView style={{ height: "100%" }}>
      <NavigationContainer>
        <Drawer.Navigator
          screenOptions={{
            // headerShown: false,
            headerStyle: {
              backgroundColor: appContext.appTheme.drawer.backgroundColor,
            },
            headerTintColor: appContext.appTheme.text,
            drawerStyle: {
              backgroundColor: appContext.appTheme.drawer.backgroundColor,
            },
          }}
          drawerContent={(props) => <SideBar {...props} />}
        >
          <Drawer.Screen name="Turtle" component={DeviceScreen} />
          <Drawer.Screen name="FAQ" component={FaqScreen} />
          <Drawer.Screen name="Feedback" component={FeedbackScreen} />
          <Drawer.Screen name="Settings" component={SettingsScreen} />
        </Drawer.Navigator>
      </NavigationContainer>

      <StatusBar
        backgroundColor={appContext.appTheme.backgroundColor}
        style={appContext.appColorScheme === "dark" ? "light" : "dark"}
      />
    </SafeAreaView>
  );
}

export default function App() {
  return (
    <Suspense
      fallback={
        <View
          style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
        >
          <Text>Loading...</Text>
        </View>
      }
    >
      <AppProvider>
        <MyApp />
      </AppProvider>
    </Suspense>
  );
}