component

import React, {Component} from 'react'
import {View, Text, Alert, Button as ReactButton} from 'react-native'
import {Container, Content, Form, Item, Input, Label, Button, Spinner} from 'native-base'

import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'
import {loginByEmail, loginByFacebook} from '../actions/auth'
import {pushSubscribe} from '../actions/device'

// styles
import styles from './styles/DefaultStyles'
import stylesPage from './styles/LoginScreenStyles'

import colors from '../themes/Colors'

var {FBLogin, FBLoginManager} = require('react-native-facebook-login')

import DropdownAlert from 'react-native-dropdownalert'

class Login extends Component {
	static navigationOptions = ({ navigation }) => {
		const { params = {} } = navigation.state
		return {
			headerRight: (
				<Button style={{...styles.button,...styles.buttonLight,...styles.buttonHeader}} onPress={() => params.handleEmailLogin()}>
					<Text style={styles.buttonLink}>ENTRAR</Text>
				</Button>
			),
		}
	}

	constructor(props){
		super(props)
		this.state = {
			username: 'ricardo@braveinvest.com.br',
			password: '123456'
		}
	}

	componentDidMount(){
		this.props.navigation.setParams({handleEmailLogin: this.handleEmailLogin.bind(this)})
	}

	handleEmailLogin(){
		this.props.loginByEmail(this.state.username, this.state.password)
			.then(() => {
				if(this.props.auth.logged_in){
					this.props.pushSubscribe()
					this.props.navigation.navigate('LoggedInNavigation')
				}else{
					this.dropdown.alertWithType('warn', 'Ops!', 'Usuário ou senha inválidos, tente novamente.')
				}
			})
	}

	// handleFacebookLogin(){
	// 	this.props.loginByFacebook(this.state.access_token)
	// 		.then(() => {
	// 			if(this.props.auth.logged_in){
	// 				this.props.navigation.navigate('home')
	// 			}
	// 		})
	// }

  render() {
		const isError = this.props.auth.isError
		var _this = this;

    	return (
			<Container style={styles.bgDefault}>

				<Content style={styles.pdTopDefault}>
					{this.props.auth.isFetching && <Spinner />}

			        <Form>
			            <Item style={styles.floatingLabelContent} floatingLabel>
			              	<Label style={styles.floatingLabel}>E-mail</Label>
							<Input
								onChangeText={(username) => this.setState({username})}
								value={this.state.username}
							/>
			            </Item>
			            <Item style={styles.floatingLabelContent} floatingLabel>
			              	<Label style={styles.floatingLabel}>Senha</Label>
							<Input
								onChangeText={(password) => this.setState({password})}
					  		    value={this.state.password}
					  		/>
			            </Item>
			        </Form>

					<Button style={{...styles.button,...styles.buttonLight}} full onPress={() => this.props.navigation.navigate('forgot_password')}>
						<Text style={styles.buttonLightText}>Esqueceu sua senha?</Text>
					</Button>

					{/*
						<FBLogin style={{ marginBottom: 10, }}
					        ref={(fbLogin) => { this.fbLogin = fbLogin }}
					        permissions={["email","user_friends"]}
					        loginBehavior={FBLoginManager.LoginBehaviors.Native}
					        onLogin={function(data){
					          _this.setState({access_token: data.credentials.token})
										_this.handleFacebookLogin()
					          _this.setState({ user : data.credentials });
										console.log("Logged in!");
					        }}
					        onLogout={function(){
					          console.log("Logged out.");
					          _this.setState({ user : null });
					        }}
					        onLoginFound={function(data){
					          console.log("Existing login found.");
					          console.log(data);
					          _this.setState({ user : data.credentials });
					        }}
					        onLoginNotFound={function(){
					          console.log("No user logged in.");
					          _this.setState({ user : null });
					        }}
					        onError={function(data){
					          console.log("ERROR");
					          console.log(data);
					        }}
					        onCancel={function(){
					          console.log("User cancelled.");
					        }}
					        onPermissionsMissing={function(data){
					          console.log("Check permissions!");
					          console.log(data);
					        }}
				    	/>
					*/}

	      		</Content>

				<Button style={{...styles.button,...styles.buttonLight}} full onPress={() => this.props.navigation.navigate('register')}>
					<Text style={styles.buttonLightText}>
						Quer ter uma conta na MOOV? <Text style={styles.buttonLink}>Clique Aqui!</Text>
					</Text>
				</Button>

				<DropdownAlert closeInterval={5000} ref={(ref) => this.dropdown = ref} />
			</Container>
    )
  }
}

const mapStateToProps = (state) => {
	return { auth: state.auth }
}

const mapDispatchToProps = (dispatch) => {
	return bindActionCreators({ loginByEmail, loginByFacebook, pushSubscribe }, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(Login)