import React from 'react-native';
import GiftedListView from 'react-native-gifted-listview';
import ProjectItem from './ProjectItem';
import { connect } from 'react-redux';
import { getProjects } from '../../actions';
import loaderHandler from 'react-native-busy-indicator/LoaderHandler';

const {
  StyleSheet,
  View
} = React;

const styles = StyleSheet.create({
  listView: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'stretch',
    justifyContent: 'center',
    flexWrap: 'wrap',
    paddingHorizontal: 5
  },
});

export class ProjectList extends React.Component {
  constructor(props) {
    super(props);
    this.renderRow = this.renderRow.bind(this);
    this._fetch = this._fetch.bind(this);
  }

  _sortByDate(projects) {
    return projects.sort(function (a, b) {
      const keyA = a.username + '/' + a.reponame;
      const keyB = b.reponame + '/' + b.username;
      if (keyA < keyB) { return -1; }
      if (keyA > keyB) { return 1; }
      return 0;
    }.bind(this));
  }

  renderRow(project) {
    return <ProjectItem project={project} userDetails={this.props.userDetails} nav={this.props.nav} />;
  }


  _fetch(page, callback, options) {
    const actionCallback = function (data) {
      this._sortByDate(data);
      callback(data);
      loaderHandler.hideLoader();
    }.bind(this);
    this.props.getProjects(actionCallback);
  }

  render() {
    if (!this.props.token) {
      return null;  // If there's no token, we can't do anything, so wait
    }
    console.log('HAS TOKEN', this.props.userDetails.token);
    return (
      <View style={styles.listView}>
        <GiftedListView
          rowView={this.renderRow}
          refreshable={true}
          pagination={false}
          onFetch={this._fetch} />
      </View>
    );
  }
};


function mapStateToProps(state) {
  return {
    userDetails: state.user.toJS(),
    projects: state.allProjects.toJS(),
    token: state.user.get('token')
  };
}

export default connect(mapStateToProps, { getProjects }) (ProjectList);