'use strict';

import React from 'react';
import ReactNative, {
	AppRegistry,
	Platform,
	StyleSheet,
	Dimensions,
	TouchableOpacity,
	View,
	Text,
	Image,
	Alert,
	Animated,
	Keyboard,
} 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 appInitialState from './reducers/app/appInitialState';
import homeInitialState from './reducers/home/homeInitialState';
import sectionInitialState from './reducers/section/sectionInitialState';
import postingInitialState from './reducers/posting/postingInitialState';
import subjectPostInitialState from './reducers/subject/subjectPostInitialState';
import userInitialState from './reducers/user/userInitialState';
import userThatNotMeInitialState from './reducers/userThatNotMe/userThatNotMeInitialState';
import likeListInitialState from './reducers/likeList/likeListInitialState';

import HomeContainer from './containers/HomeContainer';
import SectionContainer from './containers/SectionContainer';
import UserContainer from	'./containers/UserContainer';
import UserThatNotMeContainer from	'./containers/UserThatNotMeContainer';
import MessageCenterContainer from './containers/MessageCenterContainer';
import LikeMessageContainer from './containers/LikeMessageContainer';
import SubjectPostContainer from './containers/SubjectPostContainer';
import PostingContainer from './containers/PostingContainer';
import SettingContainer from './containers/UserSettingContainer';
import LikeListContainer from './containers/LikeListContainer';
import SystemMessageContainer from './containers/SystemMessageContainer';
import NavBar from './components/NavBar';
import NavBarTitle from './components/home/NavBarTitle';

import {
	setPlatform,
	setContianer,
	setChannel,
} from './reducers/app/appActions';

import {
	setUid,
} from './reducers/user/userActions';

import Immutable, {List, Record} from 'immutable';

import {
	startPosting,
	mergeCachedPosting,
	getPostUser,
	startEditPost,
} from './reducers/posting/postingActions';

import {
	modifyUserInfo,
} from './reducers/user/userActions';

import {
	onRightPressed
} from './reducers/subject/subjectPostActions';

import PostingService from './services/PostingService';

/**
 *
 * ## Initial state
 * Create instances for the keys of each structure in snowflake
 * @returns {Object} object with 4 keys
 */
function getInitialState() {
	const _initState = {
		route: {},
		app: (new appInitialState()),
    	home: (new homeInitialState()),
		section: (new sectionInitialState()),
		posting: (new postingInitialState()),
		user: (new userInitialState()),
		subject: (new subjectPostInitialState()),
		userThatNotMe: (new userThatNotMeInitialState()),
		likeList: (new likeListInitialState()),
	};
	return _initState;
}

export default function community(platform) {

  	let YH_Community = React.createClass({

		contanerIsYohoBuy() {
			return parseInt(this.props.container) === 1;
		},

		componentWillUnmount() {
			this.storeSceneSubscribe && this.storeSceneSubscribe();
		},

		render() {

		  	const store = configureStore(getInitialState());

			this.storeSceneSubscribe = store.subscribe(() => {
				let route = store.getState().route;
				if (!route || !route.scene) {
					return;
				}
				let scene = route.scene;
				if (scene.sceneKey === 'Home') {
					ReactNative.NativeModules.YH_CommunityHelper.showTabBar();
				} else {
					ReactNative.NativeModules.YH_CommunityHelper.hideTabBar();
				}
			});

			ReactNative.NativeModules.YH_CommunityHelper.uid()
				.then(uid => {
					store.dispatch(setUid(uid));
				})
				.catch(error => {
					__DEV__ && console.log(error);
				});

		  	//Connect w/ the Router
		  	const NewRouter = connect()(Router);

			let container = parseInt(this.props.container);

			store.dispatch(setPlatform(platform));
			store.dispatch(setContianer(container));
			store.dispatch(setChannel(this.props.channel));
			store.dispatch(mergeCachedPosting());

			let navBarStyle = this.contanerIsYohoBuy() ? null : {backgroundColor: 'white',};
			let extraTitleStyle = this.contanerIsYohoBuy() ? null : {color: 'black',};

			let backImage = this.contanerIsYohoBuy() ? require('./images/home/menu_back1.png') : require('./images/home/menu_back2.png');
			let leftImage = this.contanerIsYohoBuy() ? require('./images/home/menu_burger1.png') : require('./images/home/menu_burger2.png');
			let rightImage = this.contanerIsYohoBuy() ? require('./images/home/menu_write1.png') : require('./images/home/menu_write2.png');

		  	// setup the router table with App selected as the initial component
		  	return (
				<Provider store={store}>
					<NewRouter hideNavBar={false} sceneStyle={styles.scene}>
						<Scene
							key="root"
							hideNavBar={false}
							hideTabBar={true}
							navBar={NavBar}
							navigationBarStyle={navBarStyle}
							titleStyle={[styles.navTitle, extraTitleStyle]}
							leftButtonStyle={styles.leftButton}
							rightButtonStyle={styles.rightButton}
							backButtonImage={backImage}
							getSceneStyle={(props) => {
								return this.navPushStyle(props);
							}}
							getChannel={() => store.getState().app.channel}
						>
							<Scene
								key="Home"
								title="社区"
								hideNavBar={false}
								component={HomeContainer}
								initial={true}
								leftTitle={null}
								leftButtonImage={leftImage}
								onLeft={() => {
									ReactNative.NativeModules.YH_CommunityHelper.toggleDrawer();
								}}
								rightTitle={null}
								rightButtonImage={rightImage}
								onRight={this.homeOnRight}
								renderTitle={this.contanerIsYohoBuy() ? this.renderHomeTitle : null}
								getSceneStyle={(props) => {
									return this.navPushStyle(props);
								}}
							/>

							<Scene
								key="Section"
								title="版块"
								hideNavBar={false}
								component={SectionContainer}
								initial={false}
								clone={true}
								rightTitle={null}
								rightButtonImage={rightImage}
								onRight={this.homeOnRight}
								getSceneStyle={(props) => {
									return this.navPushStyle(props);
								}}
								getTitle={(childState) => {
									let sid = store.getState().section.sid;
									let item = store.getState().section.items.get(sid);
									let name = item.get('name');
									return name ? name : '版块';
								}}
							/>

							<Scene
								key="User"
								title="个人中心"
								hideNavBar={true}
								component={UserContainer}
								initial={false}
								getSceneStyle={(props) => {
									return this.navPushStyle(props);
								}}
							/>

							<Scene
								key="MessageCenter"
								title="消息"
								hideNavBar={false}
								component={MessageCenterContainer}
								initial={false}
								getSceneStyle={(props) => {
									return this.navPushStyle(props);
								}}
							/>

							<Scene
								key="LikeMessage"
								title="收到的赞"
								hideNavBar={false}
								component={LikeMessageContainer}
								initial={false}
								getSceneStyle={(props) => {
									return this.navPushStyle(props);
								}}
							/>

							<Scene
								key="SystemMessage"
								title="系统消息"
								hideNavBar={false}
								component={SystemMessageContainer}
								initial={false}
								onBack={this.onBack}
								getSceneStyle={(props) => {
									return this.navPushStyle(props);
								}}
							/>

							<Scene
								key="Setting"
								title="社区资料"
								hideNavBar={false}
								component={SettingContainer}
								initial={false}
								rightTitle='确认'
								onRight={this.settingOnRight}
								rightButtonTextStyle={{color: 'white'}}
								getSceneStyle={(props) => {
									return this.navPushStyle(props);
								}}
								onBack={(navigationState) => {
									let dismissKeyboard = require('dismissKeyboard');
									dismissKeyboard();
									Actions.pop();
								}}
							/>

							<Scene
								key="UserThatNotMe"
								title="用户中心"
								hideNavBar={true}
								clone={true}
								component={UserThatNotMeContainer}
								initial={false}
								getSceneStyle={(props) => {
									return this.navPushStyle(props);
								}}
							/>


							<Scene
								key="SubjectPost"
								title="主题帖"
								hideNavBar={false}
								component={SubjectPostContainer}
								initial={false}
								onBack={this.onBack}
								rightButtonImage={require('./images/posting/share.png')}
								onRight={this.subjectPostOnRight}
								getSid={()=>{
									let sid = store.getState().subject.sid;
									return sid;
								}}
								getSceneStyle={(props) => {
									return this.navPushStyle(props);
								}}
								onBack={(navigationState) => {
									let dismissKeyboard = require('dismissKeyboard');
									dismissKeyboard();
									Actions.pop();
								}}
							/>

							<Scene
								key='LikeList'
								hideNavBar={false}
								component={LikeListContainer}
								initial={false}
								clone={true}
								getSceneStyle={(props) => {
									return this.navPushStyle(props);
								}}
							/>

							<Scene
								key='Posting'
								title='主题帖'
								hideNavBar={false}
								component={PostingContainer}
								initial={false}
								getSceneStyle={(props) => {
									return this.navPushStyle(props);
								}}
								rightTitle='发送'
								onRight={() => {
									store.dispatch(startPosting());
								}}
								rightButtonTextStyle={[styles.barRightButtonText, {color: store.getState().posting.canSubmit ? 'white' : '#a0a0a0'}]}
								onBack={(navigationState) => {
									let dismissKeyboard = require('dismissKeyboard');
									dismissKeyboard();
									Actions.pop();
								}}
							/>

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

		renderHomeTitle(navProps) {
			return (
				<NavBarTitle {...navProps}/>
			);
		},

		homeOnRight(state) {
			state.dispatch(startEditPost());
		},

		settingOnRight(state) {
			state.dispatch(modifyUserInfo());
			Actions.pop();
		},

		subjectPostOnRight(state) {
			let sid = state.getSid();
			state.dispatch(onRightPressed(sid));
		},
		/*
		 * 自定义导航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 },
				],
			};
		},
	});

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

let styles = StyleSheet.create({
	scene: {
		backgroundColor: '#F0F0F0',
	},
    navTitle: {
        color: 'white',
		marginLeft: 60,
		marginRight: 60,
    },
	leftButton: {
		width: 60,
		left: 6,
		marginTop: 3.5,
	},
	rightButton: {
	  	width: 60,
		// right: 6,
		// marginTop: 3.5,
	},
	barRightButtonText: {
	  color: 'white',
	  textAlign: 'right',
	  fontSize: 17,
	},
});