import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
  Dimensions,
  TextInput,
  ScrollView,
  AsyncStorage,
  TouchableOpacity,
  TouchableWithoutFeedback,
  ListView,
  BackAndroid,

} from 'react-native';
import { Pulse } from 'react-native-loader';
import renderIf from '../../RenderIf';

export default class ChangePassword extends Component {
 constructor(props) {
        super(props);

            AsyncStorage.multiGet(['firstName','lastName','username'], (err, keys) => {
            this.setState({
                firstName: keys[0][1],
                lastName: keys[1][1],
                username: keys[2][1]

            })
            console.log("key dayta = "+keys);
            global.abcd = keys[2][1];
        });



        this.state = {

            current_password: '',
            new_password:'',
            confirm_password: '',
            username:'',
            errorPassword:false,
            loading: false,
        };



    }

    account(){
         this.props.navigator.pop({
            id: 'account',

        })
    }




    changePasswordAttempt() {
         //    let abc = AsyncStorage.getItem('username');
       let current_password = this.state.current_password;
       let new_password = this.state.new_password;
       let confirm_password = this.state.confirm_password;
       let username = this.state.username;
       console.log("current = " +current_password);
       console.log("new = " +new_password);
       console.log("confirm = " +confirm_password);
       console.log("username = " +username);

       if(current_password == "" || current_password == undefined){
            this.setState({
                errorPassword: true,
                 currentPassword : 'current Password cant be empty',
            });
        }
        else if(new_password == "" || new_password == undefined){
             this.setState({
                 errorPassword: true,
                 newPassword : 'new password cant be empty',
            });
        }
        else if(confirm_password == "" || confirm_password == undefined){
             this.setState({
                errorPassword: true,
                 confirmPassword : 'confirm password cant be empty',
            });
        }
        else{





      if(new_password == confirm_password){
           this.setState({
                loading: true,

            });
          let bodyParam =JSON.stringify({
            username: username,
            current_password: current_password,
            new_password: new_password
           })
        console.log(bodyParam);
            fetch('https://ro47ygzbi3.execute-api.ap-southeast-1.amazonaws.com/Development/changepassword', {
                method: 'POST',
				body: bodyParam,
                headers: {
                    "x-api-key": "NFeUWGieM17AIJTnFqMUK94RpAoOgDZdhG8WzaVe",
                    "Content-Type":"application/json;charset=utf-8",
                    "url" : "ro47ygzbi3.execute-api.ap-southeast-1.amazonaws.com"
                }
            })
            .then((response) => {
                let responseJson = JSON.parse(response._bodyInit);
                if(responseJson.status == "ok"){
                 console.log("data inserted successfully");
                 console.log("password updated successfully");
                  this.setState({
                   loading: false,

            });
                }else{
                 console.log("error in post api");
                 console.log(responseJson.status);
                }
            })
      }
      else{
          console.log("password doesn't match");
          this.setState({
                errorPassword: true,
                 passwordNotMatch : 'New password and Confirm Password Doesnt Match',
            });
      }

        }

    }
  render() {
    return (
      <View style={styles.container}>
          <View style={styles.header}>
                            <View style={styles.cancel}>
                                <TouchableOpacity
                                     style={styles.loginBtn}
                                     onPress={this.account.bind(this)}
                                >
                                      <Text style={styles.headerCancel}>Cancel</Text>
                                 </TouchableOpacity>
                            </View>

          </View>

          <View>
                <Text style={styles.changePasswordText}>Change Password</Text>

          </View>
          <ScrollView style={styles.profileForm}
                        showsVerticalScrollIndicator={true}
                        automaticallyAdjustContentInsets={false}
                     //   keyboardDismissMode='on-drag'
                        keyboardShouldPersistTaps="always"
                      >
                        {renderIf(this.state.loading)(
                            <View style={styles.loadingContainer}>
                                <Pulse size={30} color="orange" />
                                 <Text style={styles.loadingUpdate}>Updating Password ....</Text>
                            </View>
                        )}
          <View style={styles.form}>
           <Text style={styles.inputhead}>Current Password</Text>
                              <TextInput
                                secureTextEntry={true}
                                style={styles.inputDetail}
                                returnKeyType="next"
                                autoCapitalize="none"
                                autoCorrect={false}
                                onChangeText={(current_password) => this.setState({current_password})}
                              />
                             {renderIf(this.state.errorPassword)(
                             <View style={styles.loadingContainerError}>
                                <Text style={styles.errorChangePassword}>{this.state.currentPassword}</Text>
                            </View>
                        )}

           <Text style={styles.inputhead}>New Password</Text>
                              <TextInput
                               secureTextEntry={true}
                               style={styles.inputDetail}
                                returnKeyType="next"
                                autoCapitalize="none"
                                autoCorrect={false}
                                onChangeText={(new_password) => this.setState({new_password})}
                             //   onBlur={(firstNameMsg) => this.setState('')}
                             //   onBlur={this.setState({errorLogin: true})}
                             //   value={this.state.first_name}
                               />
                                {renderIf(this.state.errorPassword)(
                             <View style={styles.loadingContainerError}>
                                <Text style={styles.errorChangePassword}>{this.state.newPassword}</Text>
                            </View>
                        )}
          <Text style={styles.inputhead}>Confirm Password</Text>
                              <TextInput
                                secureTextEntry={true}
                                style={styles.inputDetail}
                                returnKeyType="next"
                                autoCapitalize="none"
                                autoCorrect={false}
                                onChangeText={(confirm_password) => this.setState({confirm_password})}
                             //   onBlur={(firstNameMsg) => this.setState('')}
                             //   onBlur={this.setState({errorLogin: true})}
                             //   value={this.state.first_name}
                                />
                                 {renderIf(this.state.errorPassword)(
                            <View style={styles.loadingContainerError}>
                                <Text style={styles.errorChangePassword}>{this.state.passwordNotMatch}</Text>
                            </View>
                                 )}
                             {renderIf(this.state.errorPassword)(
                             <View style={styles.loadingContainerError}>
                                <Text style={styles.errorChangePassword}>{this.state.confirmPassword}</Text>
                            </View>
                        )}
                <TouchableOpacity
                                style={styles.mainBtn}
                                onPress={this.changePasswordAttempt.bind(this)}
                            >
                                <Text style={styles.mainBtnText}>Reset Password</Text>
                </TouchableOpacity>
           </View>
           </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
   // padding: 10,
    backgroundColor: '#FFFFFF'
  },
   form:{
       margin:25,
   },
     inputText: {
        color: "black",
        marginTop: 10
    },
    inputhead:{
        color: "black",
    //    textAlign:"center"
},
mainBtn: {
        marginTop: 10,
        borderWidth: 1,
        borderColor: "white",
        borderRadius: 4,
        padding: 7,
        width: window.width * 0.7,
        alignItems: "center",
        backgroundColor:"orange"
    },
     mainBtnText: {
        color: "white"
    },
 header: {
         backgroundColor:"#f5f6f6",
         marginBottom: 15,
         flexDirection: "row",
         justifyContent: "center",
         alignItems: "center"
    },
    changePasswordText: {
        fontSize: 17,
        textAlign: "center",
        marginTop: 20,
        marginBottom: 20,
        color:"black"
    },
        cancel: {
        flex: 0.2,
     //   justifyContent: "center",
     //   alignItems: "center"
      marginLeft:10,
    },
    headerCancel :{
         fontSize: 17,
        color: "#f6a73c",
        marginTop: 20,
        marginBottom: 20
    },
     loadingContainerError: {
        width: window.width * 0.7,
        alignItems: "center",
        marginTop: 10
    },
     errorChangePassword: {
        color: "red",
        fontSize: 12
    },
     loadingContainer: {
      //  width: window.width * 0.7,
        alignItems: "center",
       // marginTop: 10,
        position: 'absolute',
        // width: 100,
        // height: 100,
        top: 100,
        left: 100,
      //  backgroundColor: 'green',
    },
    loadingUpdate:{
        fontSize:20,
        color:'orange',
    }

});

//AppRegistry.registerComponent('ChangePassword', () => ChangePassword);