'use strict';

import React, { 
	AppRegistry, 
	Navigator, 
	View, 
	Text,
	Image,
	Platform,
	StyleSheet,
} from 'react-native';

import { 
	Provider, 
	connect 
} from 'react-redux';

import RNRF, { 
	Router, 
	Scene, 
	TabBar,
	Actions
} from 'react-native-router-flux';

import configureStore from './store/configureStore';

import { 
	setPlatform, 
	setVersion,
	setDot 
} from './reducers/device/deviceActions';

import { 
	getDisplayState, 
} from './reducers/guide/guideActions';

import deviceInitialState from './reducers/device/deviceInitialState';
import guideInitialState from './reducers/guide/guideInitialState';
import homeInitialState from './reducers/home/homeInitialState';
import messageInitialState from './reducers/message/messageInitialState';
import userInitialState from './reducers/user/userInitialState';

import App from './containers/App';
import GuideContainer from './containers/GuideContainer';
import DrawerContainer from './containers/DrawerContainer';
import HomeContainer from './containers/HomeContainer';
import MessageContainer from './containers/MessageContainer';
import UserContainer from './containers/UserContainer';

import NavBar from './components/NavBar';
import TabIcon from './containers/TabIcon';

let VERSION = '0.0.1';


/**
 *
 * ## Initial state
 * Create instances for the keys of each structure in snowflake
 * @returns {Object} object with 4 keys
 */
function getInitialState() {
	const _initState = {
    	device: (new deviceInitialState).set('isMobile',true),
    	guide: (new guideInitialState),
    	home: (new homeInitialState),
    	message: (new messageInitialState),
    	user: (new userInitialState),
	};
	return _initState;
}


export default function native(platform) {

  	let Vendor = React.createClass({

		render() {
		  
		  	const store = configureStore(getInitialState());

		  	//Connect w/ the Router
		  	const NewRouter = connect()(Router);
		  
			// configureStore will combine reducers from snowflake and main application
			// it will then create the store based on aggregate state from all reducers
			store.dispatch(setPlatform(platform));

			store.dispatch(getDisplayState());

		  	// setup the router table with App selected as the initial component
		  	return (
				<Provider store={store}>
					<NewRouter hideNavBar={false}>
						<Scene key="root" >
							<Scene 
								key="App"
								component={App}
								title="App"
								hideNavBar={true}
								initial={true}
							/>

						  	<Scene 
						  		key="Guide"
								component={GuideContainer}
								title="Guide"
								hideNavBar={true}
								initial={false}
								type="replace"
							/>

							<Scene 
								key="Test"
								component={GuideContainer}
								title="Test"
								hideNavBar={false}
								initial={false}
								navBar={NavBar}
								type="push"
							/>

							<Scene key="Drawer" component={DrawerContainer} type="replace" hideNavBar={true} >
								<Scene key="Tabbar" tabs={true} initial={false} type="replace" component={TabBar} >
									<Scene 
										key="Home"
										title="首页"
										icon={TabIcon}
										iconName={"home"}
										hideNavBar={false}
										component={HomeContainer}
										initial={true}
										navBar={NavBar}
										titleStyle={styles.navTitle}
										drawerImage={require('./images/menu_burger.png')}
										backButtonImage={require('./images/menu_back.png')}
									/>
									    
									<Scene 
										key="Message"
										title="消息"
										iconName={"message"}
										icon={TabIcon}                       
										hideNavBar={false}
										component={MessageContainer}
										navBar={NavBar}
										titleStyle={styles.navTitle}
										renderLeftButton={()=>{}}
									/>

								    <Scene 
								    	key="User"
										title="我的"
										icon={TabIcon}                       
										iconName={"user"}
										hideNavBar={false}
										component={UserContainer}
										navBar={NavBar}
										titleStyle={styles.navTitle}
										renderLeftButton={()=>{}}
									/>
								</Scene>
							</Scene>
						</Scene>
					</NewRouter>
		    	</Provider>
		 	);
		}
	});

	AppRegistry.registerComponent('YH_Vendor', () => Vendor);
}

let styles = StyleSheet.create({
    navTitle: {
        color: 'white',
    },
});