'use strict';

import React from 'react';
import {AppRegistry, Platform, StyleSheet, Dimensions, Text} 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 homeInitialState from './reducers/home/homeInitialState';
import sectionInitialState from './reducers/section/sectionInitialState';
import postingInitialState from './reducers/posting/postingInitialState';

import userInitialState from './reducers/user/userInitialState';

import HomeContainer from './containers/HomeContainer';
import SectionContainer from './containers/SectionContainer';
import UserContainer from	'./containers/UserContainer';
import SubjectPostContainer from './containers/SubjectPostContainer';
import PostingContainer from './containers/PostingContainer';


import NavBar from './components/NavBar';

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 = {
    	home: (new homeInitialState()),
		section: (new sectionInitialState()),
		posting: (new postingInitialState()),
		user: (new userInitialState()),
	};
	return _initState;
}


export default function community(platform) {

  	let YH_Community = 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);

		  	// 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}
							navBar={NavBar}
							titleStyle={styles.navTitle}
							getSceneStyle={(props) => {
								return this.navPushStyle(props);
							}}
						>
							<Scene
								key="Home"
								title="社区"
								hideNavBar={false}
								component={HomeContainer}
								initial={true}
								leftTitle={null}
								leftButtonImage={require('./images/home/menu_burger.png')}
								onLeft={() => {}}
								rightTitle={null}
								rightButtonImage={require('./images/home/menu_write.png')}
								onRight={() => {Actions.Posting();}}
							/>

							<Scene
								key="Section"
								title="版块"
								hideNavBar={false}
								component={SectionContainer}
								initial={false}
								rightTitle={null}
								rightButtonImage={require('./images/home/menu_write.png')}
								onRight={() => {}}
							/>

							<Scene
								key="User"
								title="用户中心"
								hideNavBar={true}
								component={UserContainer}
								initial={false}
							/>


							<Scene
								key="SubjectPost"
								title="主题帖"
								hideNavBar={false}
								component={SubjectPostContainer}
								initial={false}
							/>

							<Scene
								key='Posting'
								title='主题帖'
								hideNavBar={false}
								component={PostingContainer}
								initial={false}
								rightTitle='发送'
								onRight={()=>{}}
								rightButtonTextStyle={styles.barRightButtonText}
							/>

						</Scene>
					</NewRouter>
		    	</Provider>
		 	);
		}
	});

	AppRegistry.registerComponent('YH_Community', () => YH_Community);
}

let styles = StyleSheet.create({
	scene: {
		backgroundColor:'#F0F0F0',
	},
    navTitle: {
        color: 'white',
		marginLeft: 60,
		marginRight: 60,
    },
	rightButton: {
	  width: 100,
	  height: 37,
	  position: 'absolute',
	  ...Platform.select({
		ios: {
		  top: 22,
		},
		android: {
		  top: 10,
		},
	  }),
	  right: 2,
	  padding: 8,
	  backgroundColor:'orange'
	},
	barRightButtonText: {
	  color: 'white',
	  textAlign: 'right',
	  fontSize: 17,
	},
});