import React from 'react-native';

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

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)
  }
});

export default class 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} />
        <BusyIndicator />
      </View>
    );
  }

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

  render() {
    return (
      <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;
        }}
      />
    );
  }
};