'use strict';

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

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

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

import configureStore from './lib/configureStore';

var I18n = require('react-native-i18n');

I18n.fallbacks = true;

import Translations from './lib/Translations';
I18n.translations = Translations;

import App from './containers/App';
import Login from './containers/Login';
import Logout from './containers/Logout';
import Register from './containers/Register';
import ForgotPassword from './containers/ForgotPassword';
import Profile from './containers/Profile';
import Main from './containers/Main';
import Subview from './containers/Subview';

import Icon from 'react-native-vector-icons/FontAwesome';

import {setPlatform, setVersion} from './reducers/device/deviceActions';
import {setStore} from './reducers/global/globalActions';

import authInitialState from './reducers/auth/authInitialState';
import deviceInitialState from './reducers/device/deviceInitialState';
import globalInitialState from './reducers/global/globalInitialState';
import profileInitialState from './reducers/profile/profileInitialState';

import pack from '../package';
var VERSION=pack.version;

function getInitialState() {
  const _initState = {
    auth: new authInitialState,
    device: (new deviceInitialState).set('isMobile',true),
    global: (new globalInitialState),
    profile: new profileInitialState
  };
  return _initState;
}

const styles = StyleSheet.create({
  tabBar: {
    height: 70
  }
});

class TabIcon extends React.Component {
  render(){
    var color = this.props.selected ? '#FF3366' : '#FFB3B3';
    return (
      <View style={{flex:1, flexDirection:'column', alignItems:'center', alignSelf:'center'}}>
        <Icon style={{color: color}} name={this.props.iconName} size={30} />
        <Text style={{color: color}}>{this.props.title}</Text>
      </View>
    );
  }
}

export default function native(platform) {

  let Snowflake = React.createClass( {
    render() {
      
      const store = configureStore(getInitialState());
      

      store.dispatch(setPlatform(platform));
      store.dispatch(setVersion(VERSION));
      store.dispatch(setStore(store));
      

      return (
        <Provider store={store}>

	  <Router sceneStyle={{ backgroundColor: 'white' }}>
	    <Scene key="root"
                   hideNavBar={true}>
              
              <Scene key="App"
                     component={App}
                     type="replace"
                     initial={true}/>
              
	      <Scene key="InitialLoginForm"
                     component={Register}
                     type="replace"
                     />
              
              <Scene key="Login"
                     component={Login}
                     type="replace"/>
	      
	      <Scene key="Register"
                     component={Register}
                     type="replace" />
	      
	      <Scene key="ForgotPassword"
                     component={ForgotPassword}
                     type="replace"/>
	      
	      <Scene key="Subview"
                     component={Subview}
              />

	      <Scene key="Tabbar"
                     tabs={true}
                     hideNavBar={true}
                     tabBarStyle={ styles.tabBar }
                     default="Main">
                
	        <Scene key="Logout"
                       title={I18n.t("Snowflake.logout")}
                       icon={TabIcon}
                       iconName={"sign-out"}
                       hideNavBar={true}
                       component={Logout}/>
                
                <Scene key="Main"
                       title={I18n.t("Snowflake.main")}                            
                       iconName={"home"}
                       icon={TabIcon}                       
                       hideNavBar={true}
                       component={Main}
                       initial={true}/>

                <Scene key="Profile"
                       title={I18n.t("Snowflake.profile")}                       
                       icon={TabIcon}                       
                       iconName={"gear"}
                       hideNavBar={true}
                       component={Profile}/>
	      </Scene>
	    </Scene>
	  </Router>
        </Provider>
      );
    }
  });

  AppRegistry.registerComponent('snowflake', () => Snowflake);
}