import React from 'react-native';

import ProjectItem from './ProjectItem';

const {
  ListView,
  StyleSheet,
  ScrollView
} = React;

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

export default class ProjectList extends React.Component {
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    const sortedProjects = this._sortByDate(this.props.data);
    this.state = {
      dataSource: ds.cloneWithRows(sortedProjects),
    };
    this.renderRow = this.renderRow.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} />;
  }

  render() {
    return (
      <ScrollView>
        <ListView
          contentContainerStyle={styles.listView}
          dataSource={this.state.dataSource}
          renderRow={this.renderRow} />
      </ScrollView>
    );
  }
};