import React from 'react-native';
import { getProjects } from '../../api/CircleCI';

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#333',
  },
  contentWrapper: {
    flex: 0.85,
    justifyContent: 'flex-start',
    alignItems: 'center'
  },
  text: {
    color: 'white'
  }
});

export default class Home extends React.Component {
  constructor() {
    super();

    this.state = {
      projects: ''
    };
  }

  componentWillUnmount() {
    BackAndroid.removeEventListener('hardwareBackPress', () => true);
  }

  componentWillMount() {
    BackAndroid.addEventListener('hardwareBackPress', () => true);
  }

  componentDidMount() {
    getProjects().then(function (data) {
      this.setState({
        projects: data
      });
    }.bind(this)).catch(console.log);
  }

  render() {
    const data = JSON.stringify(this.state.projects);
    return (
      <View style={styles.container}>
        <ScrollView keyboardShouldPersistTaps={false} contentContainerStyle={styles.container}>
            <View style={styles.contentWrapper}>
              <Text style={styles.text}>{data}</Text>
            </View>
        </ScrollView>
      </View>
    );
  }
};