import React from 'react';
import { StyleSheet, Text, UIManager, View } from 'react-native';
import { Provider } from 'react-redux';
import NavigationRoot from './navigation';
import { configureStore } from './store';

class App extends React.Component<{}, { error: boolean }> {

  state = { error: false };

  componentDidCatch(error) {
    this.setState({ error: true });
  }

  componentDidMount() {
    UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);
  }

  renderError() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ textAlign: 'center' }}>
          Przepraszamy, wystąpił błąd. Postaramy się go jak najszybciej naprawić.
        </Text>
      </View>
    );
  }

  render() {
    return this.state.error ? this.renderError() : (
      <View style={styles.root}>
        <Provider store={configureStore()}>
          <NavigationRoot />
        </Provider>
      </View>);
  }
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
  },
  error: {
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;
