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

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: 2,
    marginVertical: 2.5,
    flexDirection: 'row',
  },
  repoCell: {
    paddingHorizontal: 4,
    paddingVertical: 3,
    flex: 0.84
  },
  buildCell: {
    flex: 0.25,
    paddingHorizontal: 6,
    paddingVertical: 3,
    borderLeftColor: GlobalStyles.get('CIRCLE_ITEM_BORDER'),
    borderLeftWidth: 1
  },
  colourPanel: {
    flex: 0.02
  },
  repoName: {
    fontSize: 15,
    fontWeight: '500'
  },
  details: {
    fontSize: 13,
    fontWeight: '300'
  }
});

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 buildTime = minutes + ':' + seconds;
    const commit = mostRecentBuild.all_commit_details[0];
    return (
      <View style={styles.buildCell}>
        <Text style={styles.details} >#{ mostRecentBuild.build_num }</Text>
        <Text style={styles.details} >D: { buildTime }</Text>
        <Text style={styles.details} >C: { commit.commit.substring(0, 6) }</Text>
      </View>
    );
  }

  render() {
    console.log(this.props.userDetails);
    const project = this.props.project;
    const mostRecentBuild = this.state.recentBuild;
    const master = project.branches[project.default_branch].recent_builds[0];
    const statusColour = master.outcome === 'failed' ?
      GlobalStyles.get('CIRCLE_TEST_FAIL') :
      GlobalStyles.get('CIRCLE_TEST_PASS');
    const username = this.props.userDetails && this.props.userDetails.login !== project.username ?
      (<Text>U: {project.username}</Text>) : null;

    const language = project.language ?
      (<Text>L: {project.language}</Text>) : null;

    const buildDetails = mostRecentBuild ? this._displayMoreInfo(mostRecentBuild) : null;

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