import React, { Component } from 'react';
import {
  Text,
  View,
  Navigator,
  StyleSheet
} from 'react-native';
import Routes from './navigation/Routes';
import RouteMapper from './navigation/RouteMapper';
import './types';


const styles = StyleSheet.create({
  wrapper: {
    flex: 1
  } as React.ViewStyle,
  navbar: {
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: '#888'
  } as React.ViewStyle
});

export default class App extends Component<any, any> {
  renderScene(route: any, nav : any) {
    const Component = route.component;
    const props = route.props || {};
    return (
      <Component
        nav={nav}
        currentRoute={route}
        {...props} />
    );
  }

  render() {
    return (
      <View style={styles.wrapper}>
        <Navigator
          renderScene={this.renderScene}
          initialRoute={Routes.main}
          navigationBar={
            <Navigator.NavigationBar
              style={styles.navbar}
              routeMapper={RouteMapper} />
          } />
      </View>
    );
  }
}