import React from 'react-native';
import GlobalStyles from '../../settings/styles';
import { getProjectRecentBuilds } from '../../api/CircleCI';

const {
  View,
  Text,
  StyleSheet
} = React;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    height: 70,
    alignItems: 'stretch',
    backgroundColor: GlobalStyles.get('CIRCLE_ITEM_BG'),
    borderBottomColor: GlobalStyles.get('CIRCLE_ITEM_BORDER'),
    borderBottomWidth: 1,
    marginBottom: 5,
    flexDirection: 'row'
  },
  cell: {
    paddingHorizontal: 4,
    paddingVertical: 2
  },
  imageCell: {
    width: 45,
  },
  repoName: {
    fontSize: 14,
    fontWeight: '500'
  }
});

export default class ProjectItem extends React.Component {
  constructor() {
    super();
    this.state = {
      recentBuild: false
    };
    this._displayMoreInfo = this._displayMoreInfo.bind(this);
  }

  componentDidMount() {
    getProjectRecentBuilds(this.props.project.username, this.props.project.reponame).then(function (recentBuild) {
      this.setState({ recentBuild: recentBuild[0] });
    }.bind(this));
  }

  _displayMoreInfo(mostRecentBuild) {
    let seconds = Math.floor(mostRecentBuild.build_time_millis / 1000);
    const minutes = Math.floor(seconds / 60);
    seconds = seconds - (minutes * 60);
    const format = minutes + ':' + seconds;
    return (
      <Text>{ format }</Text>
    );
  }

  render() {
    console.log(this.props.userDetails);
    const project = this.props.project;
    const mostRecentBuild = this.state.recentBuild;
    const statusColour = mostRecentBuild.failed ? '#ED5C5C' : '#42C88A';
    let username;
    if (this.props.userDetails && this.props.userDetails.login !== project.username) {
      username = project.username;
    } else {
      username = 'me';
    }
    const buildDetails = mostRecentBuild ? this._displayMoreInfo(mostRecentBuild) : null;

    return (
      <View style={styles.container}>
        <View style={[styles.imageCell, {backgroundColor: statusColour}]}>
        </View>
        <View style={styles.cell}>
          <Text style={styles.repoName}>{username}/{project.reponame}</Text>
          { buildDetails }
        </View>
      </View>
    );
  }
};