import React, { Component } from 'react';
import {
    Text,
    View,
    AsyncStorage,
    TextInput,
    Button
  } from 'react-native';

export default class AsyncStorageComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            username: '',
            password: '',
        };
        this.onRetrieve = this.onRetrieve.bind(this);
    }
    componentWillMount() {
        console.log(this.username);
        let UID234_object = {
            name: 'Chris',
            age: 30,
            traits: {hair: 'brown', eyes: 'brown'},
           };

           // first user, delta values
           let UID234_delta = {
            age: 31,
            traits: {eyes: 'blue', shoe_size: 10},
           };

           // second user, initial values
           let UID345_object = {
            name: 'Marge',
            age: 25,
            traits: {hair: 'blonde', eyes: 'blue'},
           };

           // second user, delta values
           let UID345_delta = {
            age: 26,
            traits: {eyes: 'green', shoe_size: 6},
           };

           let multi_set_pairs   = [['UID234', JSON.stringify(UID234_object)], ['UID345', JSON.stringify(UID345_object)]]
           let multi_merge_pairs = [['UID234', JSON.stringify(UID234_delta)], ['UID345', JSON.stringify(UID345_delta)]]

           AsyncStorage.multiSet(multi_set_pairs, (err) => {
             AsyncStorage.multiMerge(multi_merge_pairs, (err) => {
               AsyncStorage.multiGet(['UID234','UID345'], (err, stores) => {
                 stores.map( (result, i, store) => {
                   let key = store[i][0];
                   let val = store[i][1];
                   console.log(key, val);
                 });
               });
             });
           });
    }
    onRegisterPress() {
        const username = this.state.username;
        const password = this.state.password;
        AsyncStorage.setItem('username', JSON.stringify(username));
        AsyncStorage.setItem('password', JSON.stringify(password));

        AsyncStorage.getAllKeys((err, keys) => {
            AsyncStorage.multiGet(keys, (err, stores) => {
             stores.map((result, i, store) => {
               let key = store[i][0];
               let value = store[i][1];

               // add your data to redux store
              });
            });
          });

        this.setState({username: username, password: password});
        console.log(username);
        console.log(password);
    }
    async onRetrieve() {
        const user = await AsyncStorage.getItem('username');

        console.log(user);
    }

    render() {
        return (
            <View style={styles.MainContainer}>
                <Text style={styles.TextRegistration}>Register</Text>
                <TextInput
                style={styles.TextInputStyleClass}
                onChangeText={(text) => this.setState({ username: text })} placeholder='Email' autoCapitalize='none'
                />
                <TextInput
                secureTextEntry={true}
                style={styles.TextInputStyleClass}
                onChangeText={(text) => this.setState({ password: text })} placeholder='Password' autoCapitalize='none'
                />
                <Button title="Click Here To Register" onPress={this.onRegisterPress.bind(this)} color="#2196F3" />
            </View>
        );
    }
};

const styles = {
    MainContainer: {

        justifyContent: 'center',
        flex: 1,
        margin: 100
    },

    TextInputStyleClass: {

        textAlign: 'center',
        marginBottom: 7,
        height: 40,
        borderWidth: 1,
        // Set border Hex Color Code Here.
        borderColor: '#2196F3',
        // Set border Radius.
        borderRadius: 5,
        // Set border Radius.
        //borderRadius: 10 ,
    },
    TextRegistration: {
            fontSize: 20,
            color: '#000',
            textAlign: 'center',
            marginBottom: 15
    },
};