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

import Amplify, { Auth } from 'aws-amplify'
import config from './aws-exports'
Amplify.configure(config)

export default class App extends Component {
  state = {
    username: '',
    email: '',
    phone_number: '',
    password: '',
    authCode: ''
  }
  onChangeText = (key, value) => {
    this.setState({
      [key]: value
    })
  }
  signUp() {
    const { username, password, email, phone_number } = this.state
    Auth.signUp({
      username,
      password,
      attributes: {
        phone_number,
        email
      }
    })
      .then(() => console.log('user sign up success!!'))
      .catch(err => console.log('error signing up user: ', err))
  }
  confirmSignUp() {
    Auth.confirmSignUp(this.state.username, this.state.authCode)
      .then(() => console.log('confirm user sign up success!!'))
      .catch(err => console.log('error confirming signing up user: ', err))
  }
  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.input}
          placeholder='Username'
          onChangeText={val => this.onChangeText('username', val)}
        />
        <TextInput
          style={styles.input}
          placeholder='Password'
          secureTextEntry={true}
          onChangeText={val => this.onChangeText('password', val)}
        />
        <TextInput
          style={styles.input}
          placeholder='Email'
          onChangeText={val => this.onChangeText('email', val)}
        />
        <TextInput
          style={styles.input}
          placeholder='Phone Number'
          onChangeText={val => this.onChangeText('phone_number', val)}
        />
        <Button
          title='Sign Up'
          onPress={this.signUp.bind(this)}
        />
        <TextInput
          style={styles.input}
          placeholder='Confirmation Code'
          onChangeText={val => this.onChangeText('authCode', val)}
        />
        <Button
          title='Confirm Sign Up'
          onPress={this.confirmSignUp.bind(this)}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  input: {
    height: 50,
    borderBottomWidth: 2,
    borderBottomColor: '#9E9E9E',
    margin: 10
  }
});