import React, {
	Component,
	Navigator,
	View,
	Text,
	Image,
	TouchableOpacity,
	StyleSheet
} from 'react-native';
import assets from './assets';
import buildStyleInterpolator from 'buildStyleInterpolator';

export default class TabBarNavigator extends Component {

	constructor(props) {
		super(props);
		const { views } = props;
		this.routeStack = [];
		Object.keys(views).map((key) => this.routeStack.push(views[key]))

		this.state = {
			activeTab: this.routeStack[0]
		}
	}

	componentDidMount() {
		const { didFocus, willFocus } = this.props;
		this.navigator.navigationContext.addListener('didfocus', e => {
			if(typeof didfocus == 'function') {
				didFocus(e.currentTarget.currentRoute);
			}
		});
	}

	_switchTab(activeTab) {
		let stack = this.navigator.getCurrentRoutes();
		for(i in stack) {
			if(stack[i].index === activeTab.index) {
				this.navigator.jumpTo(stack[i]);
				break ;
			}
		}
		this.setState({ activeTab });
	}

	_configureScene() {
		return {
    	gestures: null,
  		springFriction: 26,
  		springTension: 1000,
			defaultTransitionVelocity: 1,
	    animationInterpolators: {
	      into: buildStyleInterpolator({
				  opacity: {
				    from: 0,
				    to: 1,
				    min: 1,
				    max: 1,
				    type: 'linear',
				    extrapolate: false,
				    round: 0,
				  },
				}),
	      out: buildStyleInterpolator({
				  opacity: {
				    from: 1,
				    to: 0,
				    min: 0,
				    max: 0,
				    type: 'linear',
				    extrapolate: false,
				    round: 0,
				  },
				}),
	    },
		}
	}

	_renderScene(route, navigator) {
		const { action, state } = this.props;
		let Comp = route.component;
		return (
			<Comp
				action={action} 
				state={state} />
		);
	}

	render() {
		const { views, action, state } = this.props

		return (
			<Navigator 
				ref={(navigator) => this.navigator = navigator}
				initialRoute={this.routeStack[4]}
				initialRouteStack={this.routeStack}
				navigationBar={(
			<View style={styles.tabbarWrapper}>

				{Object.keys(views).map((key) => {
					if(views[key].title) {
						return (
							<TouchableOpacity onPress={this._switchTab.bind(this, views[key])} activeOpacity={1} key={"tabbar.items"+key} style={styles.tabbarItem}>
								<Image source={assets[views[key].icon]} style={styles.tabbarIcon} />
								<Text style={styles.tabbarItemText}>{views[key].title}</Text>
							</TouchableOpacity>
						)
					}else {
						return (
							<TouchableOpacity onPress={this._switchTab.bind(this, views[key])} activeOpacity={1} key={"tabbar.items"+key} style={styles.tabbarItem}>
								<Image source={assets[views[key].icon]} style={styles.tabbarIconLg} />
							</TouchableOpacity>
						);
					}
				})
			}
			</View>
				)}
				configureScene={this._configureScene}
				renderScene={this._renderScene.bind(this)} />
		);
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
	},
	tabbarWrapper: {
		flexDirection: 'row',
		height: 50,
		justifyContent: 'space-between',
		borderTopWidth: 1,
		borderTopColor: '#EFEFEF',
	},
	tabbarItem: {
		flex: 1,
		alignItems: 'center',
		justifyContent: 'center',
	},
	tabbarItemText: {
		marginTop: 5,
		color: '#999999',
		fontSize: 14,
		fontWeight: '300'
	},
	tabbarIcon: {
		height: 20,
		width: 20,
	},
	tabbarIconLg: {
		height: 49,
		width: 49,
	},
})