import React from 'react-native';
import { getProjectRecentBuilds } from '../../api/CircleCI';
import loaderHandler from 'react-native-busy-indicator/LoaderHandler';
import BuildList from '../builds/BuildList';
import GlobalStyles from '../../settings/styles';
import _ from 'underscore';

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: GlobalStyles.get('CIRCLE_BG')
  },
  title: {
    fontSize: GlobalStyles.get('TITLE_FONT_SIZE'),
    textAlign: 'center'
  },
  statusHeading: {
    fontSize: 18,
    textAlign: 'center'
  },
  statusRow: {
    flexDirection: 'row',
    alignItems: 'center',
    alignSelf: 'center',
  },
  panel: {
    alignItems: 'stretch',
    borderBottomColor: GlobalStyles.get('CIRCLE_NAVBAR_TEXT'),
    borderBottomWidth: 2,
    paddingVertical: 10
  }
});

export default class ProjectDetails extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      project: props.currentRoute.props.project,
      recentBuilds: false
    };
  }

  componentWillMount() {
    loaderHandler.showLoader('Fetching Data');
  }

  componentDidMount() {
    getProjectRecentBuilds(this.state.project.username, this.state.project.reponame, 30).then(function (recentBuilds) {
      recentBuilds = _.sortBy(recentBuilds, (b) => b.stop_time).reverse();
      this.setState({ recentBuilds });
    }.bind(this));
  }

  render() {
    const master = this.state.project.branches[this.state.project.default_branch].recent_builds[0];
    const statusStyle = master.outcome === 'failed' ?
      { color: GlobalStyles.get('CIRCLE_TEST_FAIL')} :
      { color: GlobalStyles.get('CIRCLE_TEST_PASS')};
    let list = null;
    if (this.state.recentBuilds) {
      loaderHandler.hideLoader();
      list = ( <BuildList builds={this.state.recentBuilds} project={this.state.project}/> );
    }
    return (
      <View style={styles.container}>
        <View style={styles.panel}>
          <Text style={styles.title}>Recent Builds</Text>
          <View style={styles.statusRow}>
            <Text style={styles.statusHeading}>Status: </Text>
            <Text style={[styles.statusHeading, statusStyle]}>{master.outcome}</Text>
          </View>
        </View>
        { list }
      </View>
    );
  }
};