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';

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

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

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