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

export default class AsyncStorageExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      password: '',
      user: null
    };
  }

  componentDidMount() {
    const res = this.getKey();

    res.then(data => {
      this.setState({ user: JSON.parse(data) });
    });
  }

  async getKey() {
    try {
      const response = await AsyncStorage.getItem(`@MySuperStore:key`);
      return response;
    } catch (error) {
      console.log('Error retrieving data' + error);
    }
  }

  async saveKey(value) {
    try {
      const response = await AsyncStorage.setItem(
        '@MySuperStore:key',
        JSON.stringify(value)
      );
      return response;
    } catch (error) {
      console.log('Error saving data' + error);
    }
  }

  async resetKey() {
    try {
      await AsyncStorage.removeItem('@MySuperStore:key');
      const response = await AsyncStorage.getItem('@MySuperStore:key');
      return response;
    } catch (error) {
      console.log('Error resetting data' + error);
    }
  }

  onChange = (key, value) => {
    this.setState({ [key]: value });
  };

  login = () => {
    const { email, password } = this.state;
    const user = { id: Date.now(), email, password };
    const res = this.saveKey(user);

    res.then(() => {
      console.log(user);
      this.setState({ user });
    });
  };

  logout = () => {
    const res = this.resetKey();

    res.then(data => {
      console.log('logout', data);
      this.setState({ user: null });
    });
  };

  render() {
    return (
      <View style={styles.container}>
        {!this.state.user ? (
          <View>
            <Text style={styles.welcome}>Welcome to Demo AsyncStorage!</Text>

            <TextInput
              style={styles.formInput}
              placeholder="Name"
              value={this.state.email}
              onChangeText={email => this.onChange('email', email)}
            />

            <TextInput
              style={styles.formInput}
              placeholder="Enter key you want to save!"
              value={this.state.password}
              onChangeText={password => this.onChange('password', password)}
            />

            <Button
              style={styles.formButton}
              onPress={this.login}
              title="Login"
              color="#2196f3"
              accessibilityLabel="Login"
            />
          </View>
        ) : (
          <View>
            <Button
              style={styles.formButton}
              onPress={this.logout}
              title="Logout"
              color="#f44336"
              accessibilityLabel="Logout"
            />
            <View>
              <Text>User</Text>
              <Text>id: {this.state.user.id}</Text>
              <Text>email: {this.state.user.email}</Text>
              <Text>password: {this.state.user.password}</Text>
            </View>
          </View>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    padding: 30,
    flex: 1,
    alignItems: 'stretch',
    backgroundColor: '#F5FCFF'
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  },
  formInput: {
    paddingLeft: 5,
    height: 50,
    borderWidth: 1,
    borderColor: '#555555'
  },
  formButton: {
    borderWidth: 1,
    borderColor: '#555555',
    marginBottom: 15
  }
});