import React from 'react-native';

import RouteMaster from './components/routes/RouteMaster';
import RouteMapper from './components/navigation/RouteMapper';
import GlobalStyles from './settings/styles';
import BusyIndicator from 'react-native-busy-indicator';

import { Provider } from 'react-redux';
import configureStore from './store';

require('moment-duration-format');

const {
  Navigator,
  StyleSheet,
  Platform,
  View
} = React;

const styles = StyleSheet.create({
  navbar: {
    backgroundColor: GlobalStyles.get('CIRCLE_NAVBAR_BG'),
    flexDirection:'row',
    justifyContent: 'center',
  },
  container: {
    flex: 1,
    marginTop: (Platform.OS === 'ios' ? 64 : 56)
  }
});

const store = configureStore();

export default class App extends React.Component {
  renderScene(route, nav) {
    const Component = route.component;
    const props = route.props || {};
    return (
      <View style={styles.container}>
        <Component
          nav={nav}
          currentRoute={route}
          {...props} />
      </View>
    );
  }

  componentWillMount() {
    this.initialRoute = RouteMaster.get('LOGIN');
  }

  render() {
    return (
      <Provider store={store}>
        <View style={{ flex: 1 }}>
          <Navigator
            renderScene={this.renderScene}
            initialRoute={this.initialRoute}
            navigationBar={
              <Navigator.NavigationBar
                style={styles.navbar}
                routeMapper={RouteMapper} />
            }
            configureScene={(route) => {
              if (route.sceneConfig) {
                return route.sceneConfig;
              }
              return Navigator.SceneConfigs.PushFromRight;
            }}
          />
          <BusyIndicator />
        </View>
      </Provider>
    );
  }
};