import 'react-native-gesture-handler';
// ^ le bouge pas ca casse tout ^
import { useState } from "react";
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Provider } from 'react-redux';
import { store } from './src/redux/store';
import { MD3DarkTheme, MD3LightTheme, PaperProvider, Portal } from 'react-native-paper';
import { ToastProvider } from 'react-native-toast-notifications'
import AuthPage from './src/pages/Auth';
import ClipPage from './src/pages/Clips';
import IntroPage from './src/pages/Intro';
import { StatusBar } from 'expo-status-bar';
const Stack = createNativeStackNavigator();

function App(){
  const [token,setToken] = useState("");
  const [username,setUsername] = useState(""); 

  store.subscribe(()=>{
    console.log("state Changed .w.");
    let newToken = store.getState().user.token; 
    setToken(newToken);
    console.log(store.getState());
  })

  return (
    <PaperProvider theme={MD3LightTheme}>
      <ToastProvider>
        <Provider store={store}>
          <StatusBar style="light"/>
          <NavigationContainer>
            <Stack.Navigator>
              {
                token !== "" ? (
                  <>
                    <Stack.Screen name="Home" component={ClipPage} options={{ headerShown: false }}/>
                  </>
                ) : (
                    <>
                      <Stack.Screen name="Intro" component={IntroPage} options={{ headerShown: false }} />
                      <Stack.Screen name="SignIn" component={AuthPage} options={{ headerShown: false }} />
                    </>
                  )
              }
            </Stack.Navigator>
          </NavigationContainer>
        </Provider>
      </ToastProvider>
    </PaperProvider>
  );
}

export default App;