import React from 'react-native';
import { getProjects, getUserDetails } from '../../api/CircleCI';
import loaderHandler from 'react-native-busy-indicator/LoaderHandler';
import ProjectList from '../projects/ProjectList';
import GlobalStyles from '../../settings/styles';


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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: GlobalStyles.get('CIRCLE_BG'),
  },
});

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

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

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

  componentWillMount() {
    BackAndroid.addEventListener('hardwareBackPress', () => true);
    loaderHandler.showLoader('Fetching Data');
  }

  componentDidMount() {
    this.props.nav.navigationContext.addListener('didfocus', function () {
      this.props.nav.immediatelyResetRouteStack([this.props.currentRoute]);
    }.bind(this));

    getProjects().then(function (data) {
      this.setState({
        projects: data
      });
    }.bind(this));

    getUserDetails().then(function (userDetails) {
      this.setState({userDetails});
    }.bind(this));
  }

  render() {
    let list;
    if (this.state.projects) {
      list = (
        <ProjectList data={this.state.projects} userDetails={this.state.userDetails} />
      );
      loaderHandler.hideLoader();
    } else {
      list = ( <View /> );
    }
    return (
      <View style={styles.container}>
        { list }
      </View>
    );
  }
};