import React,{

Component,

PropTypes,

Navigator,

StyleSheet,

View,

Text,

Image,

Dimensions

} from 'react-native';

import * as Home from './Home';

import * as UtilsComponent from './Utils';

import Router from '../configs/Router';

import connectComponent from '../utils/connectComponent';

import config from '../configs';

const Utils = connectComponent(UtilsComponent);

const { height, width } = Dimensions.get('window');

const initialRoute = {

name: 'home',

index: 0,

component: connectComponent(Home),

id: 0

};

class Navigation extends Component {

constructor(props) {

super(props);

this.ids = [];

}

componentDidMount() {

this.navigator.navigationContext.addListener('didfocus', e => {

const { index, id } = e.data.route;

const haveFocused = this.ids.indexOf(id) > -1;

this[index] && this[index] && this[index].getWrappedInstance().componentDidFocus && this[index].getWrappedInstance().componentDidFocus(haveFocused);

!haveFocused && this.ids.push(id);

});

}

renderScene({ component, name, props, id, index }, navigator) {

this.router = this.router || new Router(navigator);

if (component) {

return React.createElement(component, {

...props,

ref: view => this[index] = view,

router: this.router,

route: {

name,

id,

index

}

});

}

}

configureScene(route) {

if (route.sceneConfig) {

return route.sceneConfig

}

return Navigator.SceneConfigs.FloatFromRight

}

render() {

return (

<Image

source={{ uri: config.bgImgUri }}

style={styles.bg}>

<Navigator

ref={view => this.navigator=view}

initialRoute={initialRoute}

configureScene={this.configureScene.bind(this)}

renderScene={this.renderScene.bind(this)}/>

<Utils/>

</Image>

)

}

}

const styles = StyleSheet.create({

container: {

flex: 1

},

flexCenter: {

flex: 1,

justifyContent: 'center',

alignItems: 'center'

},

bg: {

flex: 1,

height,

width,

backgroundColor: 'transparent'

}

});

export default Navigation;