import React from 'react-native';
import GlobalStyles from '../../settings/styles';

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#333',
  },
  contentWrapper: {
    flex: 0.85,
    justifyContent: 'flex-start',
    alignItems: 'center'
  },
  button: {
    flex: 0.08,
    backgroundColor: GlobalStyles.get('CIRCLE_GREY'),
    borderColor: GlobalStyles.get('CIRCLE_GREY'),
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
    borderWidth: 2,
    borderRadius: 12,
    margin: 5
  },
  buttonText: {
    fontSize: 18,
    color: 'white',
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    margin: 5
  },
  title: {
    fontSize: 30,
    margin: 13,
    flex: 1
  },
  text: {
    color: 'white'
  }
});

export default class Login extends React.Component {

  componentWillUnmount() {
    BackAndroid.removeEventListener('hardwareBackPress', this.props.nav.pop);
  }

  componentWillMount() {
    BackAndroid.addEventListener('hardwareBackPress', this.props.nav.pop);
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
          <TouchableHighlight
            style={styles.button}
            onPress={this.props.nav.pop}
            underlayColor={GlobalStyles.get('CIRCLE_GREY_DARK')}>
            <Text style={[styles.text, styles.buttonText]}>
              BACK
            </Text>
          </TouchableHighlight>
          <Text style={[styles.title, styles.text]}>
            About
          </Text>
        </View>
        <ScrollView keyboardShouldPersistTaps={false} contentContainerStyle={styles.container}>
            <View style={styles.contentWrapper}>
              <Text>Content</Text>
            </View>
        </ScrollView>
      </View>
    );
  }
};