import React from 'react-native';
import GlobalStyles from '../../settings/styles';
import BuildItem from './BuildItem';

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 BuildList extends React.Component {
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(this.props.builds),
    };
  }

  renderRow(build) {
    if (build.build_time_millis < 1) {
      return null;
    }
    const statusColour = build.status === 'failed' ?
      GlobalStyles.get('CIRCLE_TEST_FAIL') :
      GlobalStyles.get('CIRCLE_TEST_PASS');
    return <BuildItem build={build} project={this.props.project} statusColour={statusColour} />;
  }

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