import React from 'react';
import { Provider } from 'react-redux';
import { Platform, StatusBar } from 'react-native';
import KeyboardManager from 'react-native-keyboard-manager';
import { store } from './reducers';
import { createAppContainer, createStackNavigator } from 'react-navigation';
import { setTopLevelNavigator } from './NavigationService';
import { routeConfigMap, SPLASH_SCREEN } from './components/screens/routeConfigMap';
import * as RNLocalize from 'react-native-localize';
import setI18nConfig from './assets/localization/setI18nConfig';
import { fromRight } from 'react-navigation-transitions';

StatusBar.setBarStyle('light-content', false);

const stackConfig = {
    initialRouteName: SPLASH_SCREEN,
    headerMode: 'none',
    navigationOptions: {
        headerVisible: false,
    },
    cardStyle: {
        backgroundColor: 'black',
        opacity: 1,
    },
    transitionConfig: () => fromRight(),
};

const AppNavigator = createStackNavigator(routeConfigMap, stackConfig);
const AppContainer = createAppContainer(AppNavigator);

class App extends React.Component {
    constructor(props) {
        super(props);
        setI18nConfig();
    }

    componentDidMount() {
        RNLocalize.addEventListener('change', this.handleLocalizationChange);
        Platform.OS === 'ios' && KeyboardManager.setToolbarPreviousNextButtonEnable(true);
    }

    componentWillUnmount() {
        RNLocalize.removeEventListener('change', this.handleLocalizationChange);
    }

    handleLocalizationChange = () => {
        setI18nConfig();
        this.forceUpdate();
    };

    render() {
        return (
            <Provider store={store}>
                <AppContainer ref={navigationRef => setTopLevelNavigator(navigationRef)}/>
            </Provider>
        );
    }
}

export default App;