import React from 'react-native';

import ProjectItem from './ProjectItem';

var {
  ListView,
  StyleSheet,
  Text,
  ScrollView
} = React;

var styles = StyleSheet.create({
  composerListView: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    flexWrap: 'wrap',
    padding: 15
  },
});

export default class ProjectList extends React.Component {
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    console.log(JSON.stringify(this.props.data));
    this.state = {
      dataSource: ds.cloneWithRows(this.props.data)
    };
    this.renderRow = this.renderRow.bind(this);
  }

  renderRow(project) {
    return (
      <ProjectItem project={project} />
    );
  }

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