import "react-native-gesture-handler";
import React from "react";
import { StyleSheet, useColorScheme, useWindowDimensions } from "react-native";
import {
  NavigationContainer,
  DarkTheme as NavigationDarkTheme,
  DefaultTheme as NavigationDefaultTheme,
} from "@react-navigation/native";
import { PaperProvider, Text, adaptNavigationTheme } from "react-native-paper";
import { StatusBar } from "expo-status-bar";
import { BottomNavigation } from "./src/BottomNavigation";
import { DrawerNavigation } from "./src/DrawerNavigation";

const linking = {
  prefixes: [
    /* your linking prefixes */
    "musclecat://",
    "https://musclecat.pi.korz.tech",
    "https://musclecat.pi4.korz.tech",
  ],
  config: {
    /* configuration for matching screens with paths */
    screens: {
      Home: {
        screens: {
          List: "lists/:listId?",
          Task: "tasks/:taskId",
        },
      },
      Notifications: "notifications",
      Profile: "profile",
    },
  },
};

const { LightTheme, DarkTheme } = adaptNavigationTheme({
  reactNavigationLight: NavigationDefaultTheme,
  reactNavigationDark: NavigationDarkTheme,
});

export default function App() {
  const colorScheme = useColorScheme();
  const dimensions = useWindowDimensions();
  //const NavigationComponent = dimensions.width < 700 ? BottomNavigation : DrawerNavigation;

  return (
    <PaperProvider>
      <NavigationContainer
        linking={linking}
        fallback={<Text>Loading...</Text>}
        theme={colorScheme === "dark" ? DarkTheme : LightTheme}
      >
        <BottomNavigation />
        <StatusBar />
      </NavigationContainer>
    </PaperProvider>
  );
}

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