import React from 'react';
import { Link } from 'react-router';
import CircularProgressbar from 'react-circular-progressbar';
import userSettings from '../containers/userSettings';
import helpers from './helpers'

class Home extends React.Component {
  constructor() {
    super();
    this.state = {
      events: helpers,
      pushEvents: null,
    }
}

goToRepos() {
  this.context.router.push('/repos');
}

grabUserInfo() {
  fetch(`https://api.github.com/users/bcgodfrey91/events?page=0&callback`, {
    method: 'GET'
  })
  .then((res) => {return res.json(); })
  .then((response) => { this.setState({events: response}) })
  .catch(() => { alert('Please try again.')})
}

getPushEvent() {
  const { events } = this.state
  const pushEv = events.filter((ghEvent) => ghEvent.type==='PushEvent')
  this.setState({ pushEvents: pushEv})
}

getCommits() {
  const { pushEvents } = this.state
  const commitLengths = pushEvents.map((obj) => obj.payload.commits.length)
  const reducedCommits = commitLengths.reduce((a, b) => a + b, 0)
  console.log(reducedCommits);
}

  render(){
    return(
      <div className='home-container'>
        <section className='home'>
          <section className='current-mod-stats'>
            <div className='stat'>
              <h3>Mod 1 Repost:</h3>
              <h1>22</h1>
            </div>
            <div className='stat'>
              <h3>Mod 1 Commits:</h3>
              <h1>134</h1>
            </div>
          </section>
          <div className='stat'>
            <h3>You VS Last Mod:</h3>
            <CircularProgressbar
              percentage={60}
              strokeWidth={20} />
          </div>
          <div className='follower-count'>
            <h3>14</h3>
            <h4>Followers</h4>
            <button
            onClick={() => this.getPushEvent()}
            >fetch</button>
            <button
            onClick={() => console.log(this.state.pushEvents) }
            >log</button>
            <button
            onClick={() => this.getCommits() }
            >commits</button>
          </div>
        </section>
        <Link to='/repos'
          className='back back-right'>
          <img src='./imgs/right-arrow.svg' />
        </Link>
      </div>
    );
  }
};

export default userSettings(Home);

@@ -835,16 +835,276 @@
 Ev%7D)%0A%7D%0A%0A
+getOpenedPullRequests() %7B%0A  const %7B events %7D = this.state%0A  const pullReq = events.filter((ghEvent) =%3E ghEvent.type==='PullRequestEvent')%0A  const openedPullRequests = pullReq.filter((obj) =%3E obj.payload.action==='opened')%0A  return openedPullRequests.length%0A%7D%0A%0A
 getCommi
@@ -1106,24 +1106,24 @@
 Commits() %7B%0A
-
   const %7B pu
@@ -1290,28 +1290,23 @@
 b, 0)%0A  
-console.log(
+return 
 reducedC
@@ -1311,18 +1311,16 @@
 dCommits
-);
 %0A%7D%0A%0A  re
@@ -2264,23 +2264,28 @@
 this.get
-Commits
+IssuesClosed
 () %7D%0A   

Add ability to get opened PRs.