import React from 'react-native';
import Immutable from 'immutable';

import GlobalStyles from '../../settings/styles';

const {
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableHighlight,
  ScrollView,
  BackAndroid
} = React;

const styles = StyleSheet.create({
  container: {
    flex: .5,
    flexWrap: 'nowrap',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  input: {
    height: 50,
    width: 300,
    borderColor: 'gray',
    borderWidth: 1
  },
  loginButton: {
    backgroundColor: GlobalStyles.get('CIRCLE_BLUE'),
    margin: 10,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10
  },
  loginButtonText: {
    fontSize: 16,
    color: 'white',
  },
  title: {
    fontSize: 25,
    margin: 13
  }
});

export default class Login extends React.Component {
  constructor() {
    super();
    this.state = Immutable.Map({
      password: '',
    });
  }

  validate() {

  }

  componentWillMount() {
    BackAndroid.addEventListener('hardwareBackPress', () => { return true; });  // Disable back button
  }

  render() {
    return (
      <ScrollView keyboardShouldPersistTaps={false} contentContainerStyle={styles.container}>
        <View style={styles.container}>
          <Text style={styles.title}>
            Login to continue
          </Text>
          <TextInput
            style={styles.input}
            onChangeText={(password) => this.state.set('password', password)}
            value={this.state.get('password')}
            onSubmitEditing={this.validate}
            placeholder="Password"
          />
        <TouchableHighlight style={styles.loginButton} onPress={this.validate}>
            <Text style={styles.loginButtonText}>
              Authenticate
            </Text>
          </TouchableHighlight>
        </View>
      </ScrollView>
    );
  }
};