import 'react-native-gesture-handler';
// ^ le bouge pas ca casse tout ^
import {AppRegistry, Platform} from 'react-native';

import {useState} from 'react';
import {NavigationContainer } from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {Provider} from 'react-redux';
import {store, persistor} from './src/redux/store';
import {PaperProvider} 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';
import {Material3Dracula, ReactNavigationDracula} from './src/themes';
import {SafeAreaProvider} from 'react-native-safe-area-context';
const Stack = createNativeStackNavigator();
import {PersistGate} from 'redux-persist/integration/react';

function App() {
  const [token, setToken] = useState(store.getState().user.token);
  const [username, setUsername] = useState('');


  store.subscribe(() => {
    let newToken = store.getState().user.token;
    setToken(newToken);
  });

  return (
    <PaperProvider theme={Material3Dracula}>
      <ToastProvider>
        <Provider store={store}>
          <PersistGate loading={null} persistor={persistor}>
            <StatusBar style="light" />
            <SafeAreaProvider>
              <NavigationContainer theme={ReactNavigationDracula}>
                <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>
            </SafeAreaProvider>
          </PersistGate>
        </Provider>
      </ToastProvider>
    </PaperProvider>
  );
}

export default App;