import "react-native-gesture-handler";
import { StatusBar } from "expo-status-bar";
import { Appearance, StyleSheet } from "react-native";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";
import SideBar from "./src/Components/SideBar";
import FaqScreen from "./src/Screens/FAQ";
import FeedbackScreen from "./src/Screens/Feedback";
import { PaperProvider } from "react-native-paper";
import {
  AppContext,
  AppProvider,
  Constants,
  GetDataFromList,
  GetMultipleData,
} from "./src/utils";
import DeviceScreen from "./src/Screens/Device";
import SettingsScreen from "./src/Screens/Settings";
import { useContext, useEffect } from "react";
import { SafeAreaView } from "react-native-safe-area-context";

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 ? Appearance.getColorScheme() : appColorScheme
      );

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

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

    loadData();
  }, []);

  return (
    <SafeAreaView style={{ height: "100%" }}>
      <PaperProvider>
        <NavigationContainer>
          <Drawer.Navigator
            screenOptions={{
              // headerShown: false,
              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>
      </PaperProvider>

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

export default function App() {
  return (
    <AppProvider>
      <MyApp />
    </AppProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});