import "react-native-gesture-handler";
import { StatusBar } from "expo-status-bar";
import { 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 { Theme } from "./src/utils";
import DeviceOldScreen from "./src/Screens/DeviceOld";
import DeviceScreen from "./src/Screens/Device";
import { Colors } from "react-native-ui-lib";
import SettingsScreen from "./src/Screens/Settings";

Colors.loadSchemes({
  light: {
    screenBG: "transparent",
    textColor: Colors.grey10,
    moonOrSun: Colors.yellow30,
    mountainForeground: Colors.green30,
    mountainBackground: Colors.green50,
    $backgroundSuccess: Colors.green40,
    $backgroundSuccessLight: Colors.green70,
  },
  dark: {
    screenBG: Colors.grey10,
    textColor: Colors.white,
    moonOrSun: Colors.grey80,
    mountainForeground: Colors.violet10,
    mountainBackground: Colors.violet20,
    $backgroundSuccess: Colors.green40,
    $backgroundSuccessLight: Colors.green20,
  },
});

Colors.setScheme("dark");

const Drawer = createDrawerNavigator();

/*
    PRIMARY: "#e67e22",
    SECONDARY: "#9b59b6",
*/

export default function App() {
  return (
    <PaperProvider theme={Theme}>
      <NavigationContainer>
        <Drawer.Navigator drawerContent={(props) => <SideBar {...props} />}>
          <Drawer.Screen name="Splash X3" component={DeviceScreen} />
          <Drawer.Screen name="Spinner V6" component={DeviceOldScreen} />
          <Drawer.Screen name="FAQ" component={FaqScreen} />
          <Drawer.Screen name="Feedback" component={FeedbackScreen} />
          <Drawer.Screen name="Settings" component={SettingsScreen} />
        </Drawer.Navigator>
      </NavigationContainer>

      <StatusBar style="dark" />
    </PaperProvider>
  );
}

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