import React, { Component }                     from 'react'
import { FBLogin, FBLoginView, FBLoginManager } from 'react-native-facebook-login'
import { FormLabel, FormInput }                 from 'react-native-elements'
import Icon                                     from 'react-native-vector-icons/Ionicons'
import ImagePicker                              from 'react-native-image-picker'
import ActionSheet                              from 'react-native-actionsheet'
import DatePicker                               from 'react-native-datepicker'
import Modal                                    from 'react-native-modal'
import Usuario                                  from '../models/usuario'
import strings                                  from '../strings'
import Termos                                   from './termos'
import {
    StyleSheet, Dimensions, View,
    Text, ImageBackground, TouchableOpacity,
    StatusBar, Image, NativeModules, AsyncStorage,
    TextInput, ScrollView, Picker
} from 'react-native'


const { RNTwitterSignIn } = NativeModules;
const w = Dimensions.get('window').width
const h = Dimensions.get('window').height

export default class Cadastro extends Component {


    constructor(props) {

        super(props)

        this.state = {
            fullname: '',
            birthday: '',
            gender: '',
            password: '',
            confirmation: '',
            email: '',
            avatarSource: require('../imgs/no-image.jpg')
        }

        this.cadastrar       = this.cadastrar.bind(this)
        this.selecinarAvatar = this.selecinarAvatar.bind(this)
    }

    static navigationOptions = ({ navigation }) => {
        const { state, setParams } = navigation;
        return {
            title: 'GRANSPOT'
        };
    };

    cadastrar() {
        if (this.state.confirmation != this.state.password) {
            alert('Senhas não conferem')
            return;
        }

        let usuario = {
            nome:     this.state.fullname,
            usuario:  this.state.username,
            email:    this.state.email,
            genero:   this.state.gender,
            password: this.state.password,
            picture:  this.state.avatarSource,
            data_nascimento: this.state.birthday
        }

        let callback = (hasErrors) => {
            if (hasErrors.error) {
                alert('Email ou usuário já em uso.')
            } else {
                alert('Favor ative seu cadastro no link enviado por email.')
                this.props.navigation.goBack()
            }
        }

        Usuario.novo(usuario, callback)
    }

    selecinarAvatar() {
        var options = {
            title: 'Select Avatar',
            storageOptions: {
                skipBackup: true,
                path: 'images'
            }
        };

        let callback = (response) => {
            console.log("SPACE ZOMBIES")
            if (response.didCancel) {
                console.log('User cancelled image picker');
            }
            else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
            }
            else if (response.customButton) {
                console.log('User tapped custom button: ', response.customButton);
            }
            else {
                let fonte = 'data:image/jpeg;base64,' + response.data
                console.log(fonte.substr(0, 50))
                this.setState({
                    avatarSource: {uri: fonte}
                });
            }
        }

        ImagePicker.showImagePicker(options, callback.bind(this))
    }


    render() {
        return (
            <ScrollView style={{ width: '100%', backgroundColor: 'white', height: '100%' }}>
                <View style={{ flex: 0.4 }}>
                    <Text style={{
                        marginLeft: 10,
                        fontSize: 20,
                        fontWeight: 'bold',
                        textAlignVertical: 'center',
                        color: 'black',
                        height: '100%'
                     }}>{strings.register_profile}</Text>
                </View>

                <TouchableOpacity
                    onPress={this.selecinarAvatar}
                    style={{
                                marginTop: 20,
                                flex: 1, backgroundColor: 'white',
                                justifyContent: 'center', alignItems: 'center' ,
                                height: 140
                             }}>
                    <ImageBackground style={{
                            flex: 1,
                            aspectRatio: 1,
                            backgroundColor: '#ccc',
                            borderRadius: 400
                        }}
                        source={this.state.avatarSource}
                        borderRadius={400} >
                    </ImageBackground>
                </TouchableOpacity>

                <View style={{ flex: 3, marginLeft: 20, marginRight: 20, marginTop: 50 }}>
                        <View style={{ flex: 1 }}>
                            <TextInput placeholderTextColor="#000"
                                       value={this.state.fullname}

                                       onChangeText={ (v) => this.setState({ fullname: v }) }
                                       placeholder={strings.full_name} />
                        </View>

                        <View style={{ flex: 1 }}>
                            <TextInput placeholderTextColor="#000"
                                        value={this.state.birthday}


                                        onChangeText={(v) => this.setState({ birthday: v })}
                                        placeholder={strings.birthday} />

                            <DatePicker
                                style={{ display: 'none' }}
                                date={this.state.birthday}
                                mode="date"
                                placeholder={strings.birthday}
                                format={strings.formatDate}
                                confirmBtnText={strings.confirm}
                                cancelBtnText={strings.cancel}
                                ref='birthday'
                                onDateChange={(birthday) => { this.setState({ birthday: birthday }) }}
                            />
                        </View>

                        <View style={{ flex: 1}}>

                            <Picker
                                selectedValue={this.state.gender}
                                textStyle={{
                                    borderColor: '#000',
                                    borderWidth: 2
                                }}
                                onValueChange={(itemValue, itemIndex) => this.setState({ gender: itemValue })}>
                                <Picker.Item label={strings.male} value={strings.male} />
                                <Picker.Item label={strings.female} value={strings.female} />
                                <Picker.Item label={strings.other} value={strings.other} />
                            </Picker>
                        </View>

                        <View style={{ flex: 1 }}>

                            <TextInput
                                        style={{ display: 'none' }}
                                        placeholderTextColor="#000"
                                        value={this.state.gender}

                                        onChangeText={(v) => this.setState({ gender: v })}
                                        placeholder={strings.gender} />
                        </View>


                        <View style={{ flex: 1 }}>
                            <TextInput placeholderTextColor="#000"
                                        value={this.state.email}

                                        onChangeText={(v) => this.setState({ email: v })}
                                        placeholder={strings.email} />
                        </View>


                        <View style={{ flex: 1 }}>
                            <TextInput placeholderTextColor="#000"
                                        value={this.state.username}

                                        onChangeText={(v) => this.setState({ username: v })}
                                        placeholder={strings.username} />
                        </View>



                        <View style={{ flex: 1 }}>
                            <TextInput secureTextEntry={true}
                                        placeholderTextColor="#000"
                                        value={this.state.password}

                                        onChangeText={(v) => this.setState({ password: v })}
                                        placeholder={strings.password} />
                        </View>

                        <View style={{ flex: 1 }}>
                            <TextInput secureTextEntry={true}
                                        placeholderTextColor="#000"
                                        value={this.state.confirmation}

                                        onChangeText={(v) => this.setState({ confirmation: v })}
                                        placeholder={strings.confirmation} />
                        </View>



                </View>
                <View style={{ flex: 1, justifyContent: 'center', alignItems: 'flex-end' }}>

                    <TouchableOpacity
                                onPress={this.cadastrar}
                                style={{
                                    backgroundColor: '#C3F340',
                                    borderRadius: 8,
                                    width: 160,
                                    height: 50,
                                    marginRight: 10,
                                    alignItems: 'center',
                                    justifyContent: 'center'
                                 }}>
                        <Text style={{ fontWeight: 'bold' }}>{strings.next}</Text>
                    </TouchableOpacity>

                </View>
            </ScrollView>
        )
    }
}