'use strict';

import React from 'react';
import {AppRegistry, Navigator, View, Text, Image, Platform, StyleSheet, Animated} 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 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 accountSettlementInitialState from './reducers/accountSettlement/accountSettlementInitialState';
import saleStatisticsInitialState from './reducers/saleStatistics/saleStatisticsInitialState';
import stockStatsInitialState from './reducers/stockStats/stockStatsInitialState';
import deliveryStatsInitialState from './reducers/deliveryStats/deliveryStatsInitialState';
import requestStatsInitialState from './reducers/requestStats/requestStatsInitialState';
import refoundStatisticsInitialState from './reducers/refoundStatistics/refoundStatisticsInitialState';


import NavigationCardStackStyleInterpolator from 'NavigationCardStackStyleInterpolator';

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 LoginContainer from './containers/LoginContainer'
import LogoutContainer from './containers/LogoutContainer'
import ModifyPasswordContainer from './containers/ModifyPasswordContainer'
import AccountSettlementContainer from './containers/AccountSettlementContainer'
import AboutUsContainer from './containers/AboutUsContainer'
import StockStatsContainer from './containers/StockStatsContainer'
import SaleStatisticsContainer from './containers/SaleStatisticsContainer'
import DeliveryStatsContainer from './containers/DeliveryStatsContainer'
import MessageDetailContainer from './containers/MessageDetailContainer'
import RequestStatsContainer from './containers/RequestStatsContainer'
import RefoundStatisticsContainer from './containers/RefoundStatisticsContainer'

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),
		actStmt: (new accountSettlementInitialState),
		saleStats: (new saleStatisticsInitialState()),
		stockStats: (new stockStatsInitialState()),
		deliveryStats: (new deliveryStatsInitialState()),
		requestStats: (new requestStatsInitialState()),
		refoundStats: (new refoundStatisticsInitialState()),
	};
	return _initState;
}


export default function native(platform) {

  	let Vendor = React.createClass({

		/*
		 * 自定义导航push动画
		 *
		 * 参考 node_modules/react-native/Libraries/CustomComponents/
		 *     Navgationxperimental/NavigationCardStackStyleInterpolator
		 * 		function forHorizontal(props)
		 */
		navPushStyle(props) {
			const {
			  layout,
			  position,
			  scene,
			} = props;

			const index = scene.index;
			const inputRange = [index - 1, index, index + 1];
			const width = layout.initWidth;

			const opacity = position.interpolate({
				inputRange,
				outputRange: [1, 1, 0.3],
			});

			const scale = position.interpolate({
				inputRange,
				outputRange: [1, 1, 1],
			});

			const translateY = 0;
			const translateX = position.interpolate({
				inputRange,
				outputRange: [width, 0, -10],
			});

			return {
				opacity,
				transform: [
					{ scale },
					{ translateX },
					{ translateY },
				],
			};
		},

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

		  	// setup the router table with App selected as the initial component
		  	return (
				<Provider store={store}>
					<NewRouter hideNavBar={true} sceneStyle={styles.scene}>
						<Scene key="root" hideNavBar={true} hideTabBar={true}>
							<Scene
								key="App"
								component={App}
								title="App"
								hideNavBar={true}
								initial={true}
								type="replace"
							/>

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

							<Scene
								key="Login"
								component={LoginContainer}
								hideNavBar={true}
								type="replace"
							/>

							<Scene
								key="Logout"
								component={LogoutContainer}
								hideNavBar={false}
								navBar={NavBar}
								title={'修改密码'}
								titleStyle={styles.navTitle}
								type="push"
							/>
							<Scene
								key="Modify"
								component={ModifyPasswordContainer}
								hideNavBar={false}
								navBar={NavBar}
								title='修改密码'
								titleStyle={styles.navTitle}
								type="push"
							/>
							<Scene
								key="SaleStats"
								component={SaleStatisticsContainer}
								title='销售统计'
								hideNavBar={false}
								navBar={NavBar}
								titleStyle={styles.navTitle}
								type="push"
							/>
							<Scene
								key="RefoundStats"
								component={RefoundStatisticsContainer}
								title='退货统计'
								hideNavBar={false}
								navBar={NavBar}
								titleStyle={styles.navTitle}
								type="push"
							/>
							<Scene
								key="MessageDetail"
								component={MessageDetailContainer}
								hideNavBar={false}
								navBar={NavBar}
								title={'消息'}
								titleStyle={styles.navTitle}
								type="push"
							/>

							<Scene
								key='DeliveryStats'
								component={DeliveryStatsContainer}
								title='发货入库'
								hideNavBar={false}
								initial={false}
								navBar={NavBar}
								titleStyle={styles.navTitle}
								type='push'
							/>

							<Scene
								key='RequestStats'
								component={RequestStatsContainer}
								title='请退统计'
								hideNavBar={false}
								initial={false}
								navBar={NavBar}
								titleStyle={styles.navTitle}
								type='push'
							/>

							<Scene
								key='StockStats'
								component={StockStatsContainer}
								title='库存统计'
								hideNavBar={false}
								initial={false}
								navBar={NavBar}
								titleStyle={styles.navTitle}
								type='push'
							/>

							<Scene
								key='AccountSettlement'
								component={AccountSettlementContainer}
								title='对账结算'
								hideNavBar={false}
								initial={false}
								navBar={NavBar}
								titleStyle={styles.navTitle}
								type='push'
							/>

							<Scene
								key='AboutUs'
								component={AboutUsContainer}
								title='关于我们'
								hideNavBar={false}
								initial={false}
								navBar={NavBar}
								titleStyle={styles.navTitle}
								type='push'
							/>

							<Scene key="Drawer" component={DrawerContainer} type="replace" hideNavBar={true} getSceneStyle={(props) => {
								return this.navPushStyle(props);
							}}>
								<Scene key="Tabbar" tabs={true} initial={false} type="replace" hideNavBar={true} component={TabBar}>
									<Scene
										key="Home"
										title="首页"
										icon={TabIcon}
										iconNormal={require('./images/tabbar/home_normal.png')}
										iconSelected={require('./images/tabbar/home.png')}
										hideNavBar={false}
										component={HomeContainer}
										initial={true}
										navBar={NavBar}
										titleStyle={styles.navTitle}
										drawerImage={require('./images/menu_burger.png')}
										getTitle={(childState) => {
											let shopName = store.getState().home.get('shopName');
											return shopName ? shopName : '首页';
										}}
									/>

									<Scene
										key="Message"
										title="消息"
										iconNormal={require('./images/tabbar/message_normal.png')}
										iconSelected={require('./images/tabbar/message.png')}
										icon={TabIcon}
										hideNavBar={false}
										component={MessageContainer}
										navBar={NavBar}
										titleStyle={styles.navTitle}
										renderLeftButton={()=>{}}
										hasDot={true}
									/>

								    <Scene
								    	key="User"
										title="我的"
										icon={TabIcon}
										iconNormal={require('./images/tabbar/user_normal.png')}
										iconSelected={require('./images/tabbar/user.png')}
										hideNavBar={false}
										component={UserContainer}
										navBar={NavBar}
										titleStyle={styles.navTitle}
										renderLeftButton={()=>{}}
										getShopName={(childState => {
											return store.getState().home.get('shopName');
										})}
									/>
								</Scene>
							</Scene>
						</Scene>
					</NewRouter>
		    	</Provider>
		 	);
		}
	});

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

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