import React from 'react';
import { map, keyBy } from 'lodash';
import SignupCard from '../SignupCard';
import { RestApiClient } from '@dosomething/gateway';
import MetaInformation from '../MetaInformation';
import UserInformation from '../Users/UserInformation';

class UserOverview extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: false,
    },

    this.api = new RestApiClient;
  }

  componentDidMount() {
    this.setState({
      loading: true,
    });

    this.getUserActivity(this.props.user.id)
    .then(() => {
      const ids = map(this.state.signups, 'campaign_id');
      this.getCampaigns(ids);

      this.setState({
        loading: false,
      });
    });
  }

  /**
   * Gets the user activity for the specified user and update state.
   *
   * @param {String} id
   * @return {Object}
   */
  getUserActivity(id) {
    let request = this.api.get('api/v2/activity', {
      filter: {
        northstar_id: id,
      },
      orderBy: 'desc',
      limit: 'all',
    });

    return request.then((result) => {
      this.setState({
        signups: result.data
      });
    });
  }

  /**
   * Gets campaigns associated with signups.
   *
   * @param {Array} ids
   * @return {Object}
   */
  getCampaigns(ids) {
    this.api.get('api/v2/campaigns', {
      ids: ids.join()
    }).then(json => this.setState({
      campaigns: keyBy(json, 'id'),
    }));
  }

  render() {
    const user = this.props.user;

    return (
      <div>
        <div className="container__block">
          <h2 className="heading -emphasized -padded"><span>User Info</span></h2>
        </div>

        <div className="container__block">
          <UserInformation user={user}>
            <MetaInformation title="Meta" details={{
              "Source": user.source,
              "Northstar ID": user.id,
            }} />
          </UserInformation>
        </div>

        <div className="container__block">
          <h2 className="heading -emphasized -padded"><span>Campaigns</span></h2>
        </div>

        <div className="container__block">
          {this.state.loading ?
            <div className="spinner"></div>
          :
            map(this.state.signups, (signup, index) => {
              return <SignupCard key={index} signup={signup} campaign={this.state.campaigns[signup.campaign_id]} />;
            })
          }
        </div>

      </div>
    )
  }
}

export default UserOverview;

@@ -386,23 +386,63 @@
  false,%0A
+      signups: %5B%5D,%0A      campaigns: %5B%5D,%0A
     %7D,%0A
-
 %0A    thi
@@ -543,24 +543,50 @@
 e,%0A    %7D);%0A%0A
+    // Get user activity.%0A
     this.get
@@ -618,16 +618,73 @@
 ser.id)%0A
+    // Then get the campaign data tied to that activity.%0A
     .the
@@ -2312,16 +2312,115 @@
       :%0A
+            this.state.signups.length === 0 ?%0A              %3Cdiv%3EEMPTY STATE%3C/div%3E%0A            :%0A  
         
@@ -2478,24 +2478,26 @@
             
+ 
+ 
 return %3CSign
@@ -2561,16 +2561,39 @@
 ampaigns
+ ? this.state.campaigns
 %5Bsignup.
@@ -2608,14 +2608,23 @@
 _id%5D
+ : null
 %7D /%3E;%0A
+  
     

Implement the empty state logic on the user overview page