import React, {useEffect, Fragment} from 'react';
import {NavigationContainer} from '@react-navigation/native';

import {Provider, useSelector} from 'react-redux';
import {RootState, store} from '@redux/store';

import {appStatus} from '@configs/appNonSaveVar';
import {appNonSaveVarActions} from '@configs/appNonSaveVarReducer';
import {ThemeMode} from '@configs/colors';

import StartHelper from '@pages/appStart/StartHelper';

import {GluestackUIProvider} from '@gluestack-ui/themed';

import configDarkTheme, {ThemeType} from '@configs/colors';
import Navigation from '@navigation/navigation';
/*
function Test() {
  const lang = useSelector((state: RootState) => state.appVariables.lang);

  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text style={{color: '#f00'}}>
        {lang.account.registration.stepTwo.resendError[401]}
      </Text>
    </View>
  );
} */

const App = () => {
  useEffect(() => {
    console.log('App opened.');
  }, []);

  return (
    <Provider store={store}>
      <OtherProviders />
    </Provider>
  );
};

const OtherProviders = () => {
  const globalTheme = useSelector(
    (state: RootState) => state.appVariables.preferences.theme,
  );

  const navigationTheme = {
    dark: globalTheme !== ThemeMode.Light,
    colors: {
      primary: '#ff7d4f',
      background: '#222',
      card: '#222',
      text: '#fff',
      border: '#ff7d4f',
      notification: '#fff',
    },
  };

  const themeConfig: ThemeType = configDarkTheme;

  useEffect(() => {
    appNonSaveVarActions.setThemeColors(themeConfig.tokens.colors);
  });

  return (
    // <NativeBaseProvider theme={theme(globalTheme)}>
    <NavigationContainer theme={navigationTheme} /*linking={linking}*/>
      <GluestackUIProvider config={themeConfig}>
        <MainComponent />
      </GluestackUIProvider>
    </NavigationContainer>
  );
};

const MainComponent = () => {
  const currentAppStatus = useSelector(
    (state: RootState) => state.nonSaveVariables.appStatus,
  );

  return (
    <Fragment>
      <StartHelper />
      {/*<StatusBar />*/}
      {currentAppStatus === appStatus.APP_RUNNING ? <Navigation /> : null}
    </Fragment>
  );
};

export default App;