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

let styles = {

}

export class LoginPage extends Component {
  constructor(props) {
    super(props)

    this.state = {
      userName: 'john@lyon-smith.org',
      password: 'test123!'
    }
  }

  render() {
    return (
      <KeyboardAvoidingView className="view" behavior="padding">
        <ScrollView>
          <View className="logoBox">
            <Image className="image" source={acmLogo}/>
          </View>
          <Text className="username">User Name:</Text>
          <View className="fieldBlock">
            <IconInput width={250} rounded={true} icon={iconEmail} onChange={value => this.setState({email: value})}
                       value={this.state.email} iconStyle={{width: 20, height: 24, top: 12}}/>
          </View>
          <View className="fieldBlock">
            <IconInput
              password={true}
              rounded={true}
              width={250}
              icon={iconPassword}
              iconStyle={{left: 12, top: 8}}
              onChange={value => this.setState({password: value})}
              value={this.state.password}
            />
          </View>

          <View className="nextBlock">
            <NextButton busy={auth.authInProgress} width={250} title="Log In" onPress={() => this.login()}/>
          </View>

          {errorMessage}

          <TouchableOpacity onPress={() => this.toggleLoginData()}>
            <View className="linksBlock">
              <Text className="linksText">Sign Up</Text>
              <Text className="linksTextRight">Forgot password?</Text>
            </View>
          </TouchableOpacity>
        </ScrollView>
      </KeyboardAvoidingView>
    )
  }
}