'use strict';

var React = require('react-native');
var {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Image,
  Navigator,
  StatusBarIOS,
} = React;

var UserActions = require('../Actions/UserActions');
var UserStore = require('../Stores/UserStore');
var Modal = require('react-native-modal');
var LinearGradient = require('react-native-linear-gradient');
var UserActions = require('../Actions/UserActions');
var styles = require('./Styles');
var UserStoreSync = require('../Mixins/UserStoreSync');
var Consts = require('./Consts');


var LoginScreen = React.createClass({
  mixins: [UserStoreSync, Modal.Mixin],

  login() {
    UserActions.newFacebookSession();
  },

  afterUpdateUserFromStore() {
    var user = UserStore.getState();

    if (user.get('email')) {
      this.props.navigator.replace({id: 'user-info'});
    }
  },

  render() {

    StatusBarIOS.setStyle(1);

    return (
      <View style={styles.container}>

        <View style={styles.companyContainer}>
          <Text style={styles.companyNameText}>
                {Consts.companyName()}
          </Text>
        </View>

        <View style={styles.tagContainer}>
          <Text style={styles.tagText}>
                {Consts.tagLine()}
          </Text>
        </View>

        <View style={styles.footer}>
          <TouchableOpacity onPress={this.login} activeOpacity='0.8'>
            <LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
              <Text style={styles.buttonText}>
                Sign in with Facebook
              </Text>
              <Image
                style={styles.fbicon}
                source={require('image!signup_fb')}
              />
            </LinearGradient>
          </TouchableOpacity>
        </View>
      </View>
    );
  },
});

module.exports = LoginScreen;