import React, { Component } from "react";
import { AppRegistry, StyleSheet, AsyncStorage, KeyboardAvoidingView, Image, Text, View, TouchableOpacity } from "react-native";
//import { StackNavigator } from "react-navigation";

import styles from './styles';
import stylesModal from '../styles/stylesModal';
import Logo from '../assets/images/logomin.png';
import IconUser from '../assets/images/icons/user.png';
import IconLock from '../assets/images/icons/lock.png';

import ImagePicker from 'react-native-image-picker';

import { StackNavigator } from "react-navigation";

var source2;
var file = new FormData();
const options = {
  title: 'Select Avatar',
  customButtons: [{ name: 'fb', title: 'Choose Photo from Facebook' }],
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
};




export default class PhotoPerfil extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      avatarSource: ''
imageBody:''
    };

    //this.setState({name: AsyncStorage.getItem('USER')})
  }

  static navigationOptions = {
    headerStyle: {
      backgroundColor: "#16a085",
      elevation: null
    },
    header: null,
    headerLeft: null
  };

  componentWillMount() {
    this.getToken();
  }

  async getToken() {
    let accessToken = '';
    try {
      accessToken = await AsyncStorage.getItem('token') || 'none';
      if(!accessToken) {
        this.props.navigation.navigate('Login');
      } else {

          this.setState({accessToken: accessToken});
          console.warn(this.state.accessToken);
      }
    } catch(error) {
        console.log("Something went wrong");
        this.props.navigation.navigate('Login');
    }
  }




  capture() {
    ImagePicker.showImagePicker(options, (response) => {
      //console.warn('Response = ', response);

      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 {
        const source = { uri: response.uri };
        source2 = response.path;

       const data = new FormData();
        data.append('image', {
          uri: response.uri ,
          type: response.type,
          name: response.fileName,
        });



        // You can also display the image using data
        this.setState({
          avatarSource: source,
            imageBody: data
        });
      }
    });
  }
  async onRegisterPress() {
    try {
      var userId = AsyncStorage.getItem('userId') || 'none';
      var token = 'Bearer ' + AsyncStorage.getItem('token') || 'none';
      console.log(userId);
    } catch (error) {
      // Error retrieving data
      console.log(error.message);
    }
    try {
      let response = await fetch('http://54.89.116.183:3300/users/regimg', {
                              method: 'POST',
                              headers: {
                                'Content-Type': 'multipart/form-data',
                                'Authorization': 'Bearer ' +this.state.accessToken
                              },
                              body: this.state.imageBody,


                            });
      let res = await response.json();
      console.warn(response.status);
      if (response.status >= 200 && response.status < 450) {
          //Handle success
          //On success we will store the access_token in the AsyncStorage
          this.props.navigation.navigate("Boiler");
      } else {
          //Handle error
          let error = res;
          throw error;
      }
    } catch(errors) {
      //errors are in JSON form so we must parse them first.
      let formErrors = JSON.parse(errors);
      //We will store all the errors in the array.
      let errorsArray = [];
      for(var key in formErrors) {
        //If array is bigger than one we need to split it.
        if(formErrors[key].length > 1) {
            formErrors[key].map(error => errorsArray.push(`${key} ${error}`));
        } else {
            errorsArray.push(`${key} ${formErrors[key]}`);
        }
      }
      this.setState({errors: errorsArray})
    }

  }

  render() {
    return(
      <View style={styles.containerRegister}>
        <View style={styles.registerLogo}>
          <Image source={Logo} />
        </View>
        <View style={styles.contentPhoto}>
            <View style={styles.centerView}>
              <Text style={styles.PhotoPageText}>Foto de perfil</Text>
              <Text style={styles.PhotoText}>Escolha uma foto de perfil:</Text>
              <View style={styles.formCenterImg}>
                <TouchableOpacity style={styles.PhotoNewButton} onPress={() => this.capture()}>
                  <Image source={(this.state.avatarSource) ? this.state.avatarSource : null} style={styles.FormNewPetButtonImage}/>
                </TouchableOpacity>
              </View>
              <TouchableOpacity style={styles.BoileButton} onPress={() => this.onRegisterPress()}>
                <Text style={styles.BoileButtonText}>Salvar foto</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.BoileButton} onPress={() => this.props.navigation.navigate("Boiler")}>
                <Text style={styles.BoileButtonText}>Lembrar-me mais tarde</Text>
              </TouchableOpacity>
            </View>
        </View>
      </View>
      );
  }
}

AppRegistry.registerComponent("Boiler", () => Boiler);